前言
此文章涉及到的项目搭建已摆脱了所有因为搭建环境遇到的坑，希望对大家有用，能节省大家时间，快乐的学习
废话不多说，具体如下！！！
安装Node环境
1、安装node.js
下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。
检验是否安装成功，在cmd输入命令 node -v,回车 及 npm -v,回车，如出现下图所示版本信息，表示安装成功
2、安装vue-cli
打开cmd命令行工具，输入npm install -g vue-cli,回车 全局安装vue-cli
构建vue-cli项目
1、创建项目
打开cmd，进入想要创建项目的目录下，输入：vue init webpack projectname
webpack默认是安装2.0版本，若要安装1.0版本，需在webpack后面加上版本号信息，
vue init webpack#1.0 project-name(安装1.0版本)
projextname是自定义的项目名称
例：我这里命名为vuedemo
（PS：如果你的安装的是vue3.0，你得安装一个桥接工具：npm install -g @vue/cli-init
这样vue3.0和2.0的命令都可以用）
Project name:——项目名称
Project description:——项目描述
Author:——作者
Vue build:——构建模式，一般默认选择第一种
Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装
2.安装依赖
项目创建完成，打开文件夹可以看到目录结构如下
此时，项目已经初具雏形，但还未安装依赖，需打开cmd，进入项目所在根目录下，输入npm install,回车
我们此时再打开项目文件夹，可以看到多了node_modules文件夹，里面是各种需要的依赖包
3.运行项目
打开cmd，进入到项目所在目录下，输入npm run dev,回车，启动项目
启动成功后
访问 http://localhost:8080
可以在浏览器看到如下画面，恭喜你，已成功构建vue-cli项目，接下来就可以开始开发啦
4、项目开发完后打包
在项目目录下，执行npm run build，如图：
打包后项目中会多出来一个dist文件，如图：
dist文件中打开index.html就是你的vue项目打包的页面。
PS：
如果打包后的Index打开后为空白页面，你就得再配置下项目中的地址
1、打开项目下build文件utils.js,修改如图
在对应位置添加publicPath: '../../'
2、打开项目下build文件webpack.prod.conf.js,修改如图
在对应位置添加publicPath: './'
3、打开项目下config文件index.js,修改如图
assetsPublicPath: ''修改为assetsPublicPath: './'
保存上述修改后，重新打包npm run build
生成的dist中的Index.html就可以打开浏览了
网友评论