Vue-cli脚手架项目的搭建

预备
一开始搭建项目的时候需要注意自己需要的安装库是否都已经建立好了

node -v(小写v) ；如果没有显示node版本，先去官网下载安装node
vue -V(大写V) ；如果没有显示vue版本，npm i vue-cli -g安装
webpack -v(小写v)； 如果需要重新安装，就用 npm install webpack -g
当三个条件都满足，

开始

第一步

对着你的命令行使用

	vue init webpack （项目的名称）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uj17dcdM-1615553325009)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210312100706143.png)]

第二步

​ 进入到你的目录下使用

npm run dev 

就可以了，此时你的项目应该就出现了项目的地址一般都是8080(后面是怎么改你的地址)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8u9OaxCZ-1615553325011)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210312101205680.png)]

第三步

现在初步的东西我们已经搭建完成了，但是我们的项目并不干净所以需要我们去清洁下。

把原来路由下的组件给清除然后给个新的子组件，遇到一个恶心的语法检测的问题，打开我们的webpack.base.conf.js中的createElintRule吧其中的代码给注释了就可以了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOefSSQL-1615553325012)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210312102339063.png)]

第四步

之前的东西我们搞的差不多了，现在给安装个sass，记得安装依赖

npm install sass sass-loader --save-dev

如果出先安装了sass错误的情况请输入

卸载当前版本   npm uninstall sass-loader
安装     npm install sass-loader@7.3.1 --save-dev

第五步

如何设置自己的全局样式的css，将你的css文件的相对路径给找好，然后在main。js中将你的全局样式的文件给导入就好

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P8OOqRku-1615553325015)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210312104708330.png)]

在之前的时候我们说过要更改我们的端口号

Vue项目启动默认的端口号为8080，如果已经运行了一个项目，那么相同的端口号是无法再运行其他项目的，所以需要修改端口号。

如下图所示，找到项目的config文件夹下的index.js文件，然后修改port变量，然后修改即可，如8081

以上具体的方法

第六步

去除我们路径中烦人的‘#’符号只需要我们在routes中添加一个属性 mode:'history’就可以了

以上具体的方法

第六步

去除我们路径中烦人的‘#’符号只需要我们在routes中添加一个属性 mode:'history’就可以了

上面就是一个vue-cli我觉得也许会常遇到的一些问题