vue-cli构建项目

之前做过的东西再用到的时候总是忘记,于是决定写博客记录下来方便自己以后用

1.输入node -v确定node版本高于4.0
2.全局安装vue-cli:
sudo npm install -g vue-cli
安装完成后输入vue命令测试,如下图
vue-cli构建项目
3.vue init webpack 项目名
回车后需要输入项目描述,项目作者,还有项目是否使用ESLint等
4.进入项目目录:
cd 项目名
5.安装项目依赖(可能有点久):
npm install
6.运行(一定要进入第3步初始化的项目文件夹下)
npm run dev
vue-cli构建项目
打开浏览器进入localhost:8080
vue-cli构建项目
出现这个页面就成功啦

接下来是又臭又长的文件结构解析:
vue-cli构建项目
1.index.html是入口文件
2.src下的main.js是入口js
3.main.js引入了模板文件app.vue
vue-cli构建项目
4.webpack部分:
4.1 打包入口文件和出口文件在build下的webpack.base.conf.js
vue-cli构建项目
4.2 loader的配置也在build下的webpack.base.conf.js
vue-cli构建项目