1.说明
1) vue-cli
是
vue
官方提供的脚手架工具
2) github: https://github.com/vuejs/vue-cli
3)
作用
:
从
https://github.com/vuejs-templates
下载模板项目
2.创建 vue 项目
npm install -g vue-cli (安装vue-cli)
vue init webpack vue_demo (创建项目)
![](https://i-blog.csdnimg.cn/blog_migrate/c7a409406515f023140f0b35540fc63b.png)
cd vue_demo(进入项目目录)
![](https://i-blog.csdnimg.cn/blog_migrate/7b653130e18c7c4c3a34f59d12406881.png)
npm install(下载依赖)
备注:vue.js 三种方式安装(vue-cli)
![](https://i-blog.csdnimg.cn/blog_migrate/a06ac6f6e1a2c08069412cab1eb5f619.png)
npm run dev (运行项目)
![](https://i-blog.csdnimg.cn/blog_migrate/8e565c210508c3cb96103fa7bad9ff2d.png)
访问
: http://localhost:8080/ (启动)
![](https://i-blog.csdnimg.cn/blog_migrate/fb0cc37594383491636a59249f026349.png)
3.模板项目的结构
|-- build : webpack
相关的配置文件夹
(
基本不需要修改
)
|-- dev-server.js :
通过
express
启动后台服务器
|-- config: webpack
相关的配置文件夹
(
基本不需要修改
)
|-- index.js:
指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src :
源码文件夹
|-- components: vue
组件及其相关资源文件夹
|-- App.vue:
应用根主组件
|-- main.js:
应用入口
js
|-- static:
静态资源文件夹
|-- .babelrc: babel
的配置文件 功能:es6转es5
|-- .eslintignore: eslint
检查忽略的配置
|-- .eslintrc.js: eslint
检查的配置
|-- .gitignore: git
版本管制忽略的配置
|-- index.html:
主页面文件
|-- package.json:
应用包配置文件
|-- README.md:
应用描述说明的
readme
文件
主js
![](https://i-blog.csdnimg.cn/blog_migrate/0ce9f4d43c51d72b8f567e66bfc3eebb.png)
根组件:界面功能局部模块(组件三要素:html,css,js)
template:模板必须要有根标签
![](https://i-blog.csdnimg.cn/blog_migrate/8b9a4e3fa76866a8ef1b9c5e388d44bc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9247c097f7f142f9846b8f0ce4e51d10.png)