vue-cli作用
vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程。
vue-cli使用
!!前提:需要vue和webpack
-
安装全局vue-cli
npm install vue-cli -g
-
初始化,生成项目模板(my_project是项目名,自己随意)
vue init webpack my_project
-
进入生成的项目文件夹
cd my_project
-
初始化,安装依赖
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: