vue项目构建流程

1.　　下载node;

2.　　下载淘宝镜像(可有可无,下载之后以后下载其它依赖会快一点)　

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.　　随便找到一个文件夹,按住 shift 键然后鼠标右键点击,点击-----在此处打开命令窗口 ,或者用cmd进入文件夹,然后在cmd中输入:

npm install --global vue-cli

或者:

cnpm install --global vue-cli

cnpm下载比较快,是国内的资源

这样就在全局安装了vue的模板工具

4.　　安装完成后找到需要放置vue项目的文件夹里打开cmd,然后输入:

vue init webpack vuetest

　vuetest 这个是项目名称,可以随意起名,命令输入后一会儿会要用户输入一些信息,一般情况下就一路回车就行了,我一般遇到了"Use ESLint to lint your code? (Y/n)"的时候我选择否,这个是为了统一代码风格的,但是少些空格少些分号多些分号都会报错,个人感觉比较不友好,所以我选择 No ,然后剩下的就一路回车就行;

这一步其实连着webpack也都下载完了;

　　比方说创建完项目"vuetest"之后,要进入vuetest文件夹里面,然后在cmd输入:

npm install

　或者:

cnpm install

　这个cnpm下载速度不是一般的快,建议早装早受益,这个步骤安装的是vue项目需要的依赖包

　　依赖安装完之后还是在项目文件夹根目录里打开cmd输入:

npm run dev

这样就起了服务了,可以在浏览器里输入本地服务器路径查看项目页面效果了

 

　　当需要打包vue项目的时候可以在项目文件夹根目录里打开cmd输入:

npm run build

然后默认就在项目文件夹根目录生成 dist文件夹,这个文件夹里面的就是压缩之后的项目文件,dist文件夹的配置在webpack构建工具里面可以修改的,我一般用的默认的