文 | 我是孙小白
vue-cli脚手架是Vue官方提供的脚手架工具，大大降低了webpack的使用难度，可以帮助我们做以下操作：
- 生成目录结构
- 本地开发调试
- 代码部署
- 热加载
- 单元测试
如何安装？
打开终端输入：cnpm install --global vue-cli
提示许可被拒绝， 想起来了昨天启动时的权限问题， 试探性在命令前面加上了sudo， 结果可行：sudo cnpm install --global vue-cli
安装成功, 查询下版本：vue -V
用vue-cli构建项目?
创建一个基于webpack模板的新项目vue-test：vue init webpack vue-test
创建过程中会有一些配置， 一直回车就可以了：
- Project name vue-test：项目名称
- Project description A Vue.js project ： 项目描述
- Author xxx ：项目作者
- Runtime + Compiler: recommended for most users :运行加编译，按照推荐的， 直接点击回车
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere - Install vue-router?（Y/n）：是否安装官方路由，默认使用， 输入Y
- Use ESLint to lint your code?（Y/n）：是否使用ESLint代码风格管理工具来管理代码， 默认使用，输入Y
- Pick an ESLint preset（Use arrow keys）选择一个Eslint预设，直接回车
- Set up unit tests?（Y/n）：是否安装单元测试， 我选择了n
- Setup e2e tests with Nightwatch?（Y/n）：是否使用e2e测试，我选择了n
配置完成就开始创建我们的vue-test项目了，创建完后会直接执行npm install：
创建成功后如下：
进入项目， 安装并运行：
cd vue-test
cnpm install
cnpm run dev
打开浏览器访问：http://localhost:8080，显示如下：
关于项目？
打开我们的项目，可以看到如下文件夹结构:
- 服务器地址修改配置：
有时候本地调试项目， 需要修改本地IP服务，则需要打开config文件夹， 找到index.js 文件， 修改里面的host(IP)和port(端口号)
建议将 assetsPublicPath: '/' 改为assetsPublicPath: './'：因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
- vue-cli的webpack配置分析:
在package.json文件中我们可以看到开发环境(dev)和生产环境(build)的入口:
开发环境的入口文件是 build/webpack.dev.conf.js；
在webpack.dev.conf.js中出现的webpack.base.conf.js，是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置，相当重要的一个文件。
- 其他相关：
--save-dev: 自动把模块和版本号添加到项目描述文件package.json中的依赖devDependencies部分， 在开发阶段经常性使用到。
网友评论