Vue初体验 | mac系统安装vue-cli脚手架并构建项目

文 | 我是孙小白

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部分， 在开发阶段经常性使用到。