只需十步，彻底搭建Vue项目！（涵盖过程坑点，报错解决方法）

比眉伴天荒 2022-12-15 03:48 7阅读 0赞

★首先把npm换成国内镜像：`npm config set registry https://registry.npm.taobao.org`

1.  2.0安装（建议放弃）：`npm install --global vue-cli`【[踩坑记录史][Link 1]】
2.  3.0安装1：`npm uninstall vue-cli -g`【卸载旧版本，无可跳过】
3.  3.0安装2：`npm install -g @vue/cli`【编译器中选择vue-cli 3】
4.  安装必须在cmd的目录下安装。当在编辑器中运行vue -V报错时：【[报错解决方案][Link 2]】
5.  `vue create vueCli`【vueCli：项目文件夹名称】
6.  安装依赖，以及其他UI库，如element-ui，boostrap-vue：  
    `cd vueCli` 注意：此处必须进入该目录，否则报错  
    下面是安装其他组件库等元素，可跳过后续再加：

npm i element-ui -S / npm install vue bootstrap-vue bootstrap 
    npm install

1.  运行项目：`npm run dev / npm run serve` 【具体用什么命令看package.json，也可直接修改serve为dev】
2.  在main.js导入elementUI前，需要运行： `npm install --save element-ui`

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI) //此处引用elementUi
    
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

1.  build目录下的webpack监控`./src/main.js`作为项目入口文件。
2.  运行`npm run build`打包，生成的`dist`目录作为挂载服务器的入口。

★ Ctrl+c退出终端。

[Link 1]: https://blog.csdn.net/miin_ying/article/details/105487128
[Link 2]: https://blog.csdn.net/bulabulahei/article/details/108242527