vue.cli脚手架初次使用图文教程

vue-cli做用

vue-cli做为vue的脚手架，能够帮助咱们在实际开发中自动生成vue.js的模板工程。

vue-cli使用

!!前提：须要vue和webpack

1. 安装全局vue-cli

   npm install vue-cli -g

2. 初始化，生成项目模板（my_project是项目名，本身随意）

   vue init webpack my_project

3. 进入生成的项目文件夹

   cd my_project

4. 初始化，安装依赖

   npm install

安装完成，目录树：

run：

npm run dev

浏览器会自动打开到http://localhost:8080/#/ ，会看到欢迎页：

上面是在本地运行，服务器上运行：

npm run build

生成静态文件：

打开dist文件夹下新生成的index.html文件，会发现页面空白，打开控制台会发现页面中引用的css和js文件都找不到：

说明引用路径错了，须要手动修改：

进入config/index.js

原配置中的引用路径是’/’（根目录）：

修改成’./’（当前目录）：

run：

npm run build

Done: