vue脚手架安装使用手册

使用vue-cli来创建一个基于 webpack 模板的新项目

创建

cmd利用cd指令进入到保存项目的文件夹下，然后输入命令：

vue init webpack 你的项目名

 

如图标记处输入项目名称（随便命名，但不要是中文），*也可以直接把项目名写在命令后面，其它的看自己需要自行考虑yes还是no，每项的介绍如下：

Project name :项目名称 注意：这里不能使用大写

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。

我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具

Karma+Mocha，我们这里不需要，所以输入n。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为

模拟测试，我们这里不需要，所以输入n。

这里就选择npm安装 然后等待下载。。。。

实际开发中根据需要配置。

 

 

 

创建完成后文件夹内会有如下些文件

 

安装项目所需要的依赖

进入新建的项目文件夹下，就是上头有一些文件的里面，输入命令

cnpm install

因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

 

运行项目

 

cnpm run dev

 

 

退出，Ctrl + c >> y >> 回车

 

出现如图画面，在浏览器中输入网址http://localhost:8080 会出现如下图

 

注意：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用了（默认服务启动的是本地的8080端口），可以通过修改一下配置文件 config>index.js里的端口号

 

网上有的说执行cnpm run dev后，浏览器会自动默认打开一个“欢迎页面”，但是我的没有，原因应该如下

目录中config下的index.js文件中，将autoOpenBrowser的值是false，改为true就能自动打开了

 

后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

 

项目开发完成之后，可以输入 npm run build 来进行打包工作：

npm run build

 

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

 

项目上线时，只需要将 dist 文件夹放到服务器就行了。

 

附：部分文件功能介绍（网上找的图片，侵删）