一、检查node是否安装
1、node -v如果没有安装,执行下面的命令安装Node
npm install -g cnpm –registry=https://registry.npm.taobao.org
二、搭建vue项目
1、全局安装vue-cli
npm install --global vue-cli
2、进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名
vue init webpack elementDemo
Vue build ==> 打包方式,回车即可;Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
![7e532256bf6e56ff37cc91faf40a98ad.png](https://img-blog.csdnimg.cn/img_convert/7e532256bf6e56ff37cc91faf40a98ad.png)
安装项目
1、Vue build ==> 打包方式,回车即可;2、Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;3、Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;4、Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;5、Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
3、启动项目
npm run dev
![dc55b3c47bdeae9f8d29c63b48990355.png](https://img-blog.csdnimg.cn/img_convert/dc55b3c47bdeae9f8d29c63b48990355.png)
启动项目
![e4b4f9edbf16416a44abb748160f392b.png](https://img-blog.csdnimg.cn/img_convert/e4b4f9edbf16416a44abb748160f392b.png)
启动成功
![31bd0a067ffbfc07b6f61608414128a3.png](https://img-blog.csdnimg.cn/img_convert/31bd0a067ffbfc07b6f61608414128a3.png)
启动成功
4、目录介绍
![0568532eb18895dfa1729e9b7824b145.png](https://img-blog.csdnimg.cn/img_convert/0568532eb18895dfa1729e9b7824b145.png)
目录结构
1、build:构建脚本目录 1)build.js ==> 生产环境构建脚本; 2)check-versions.js ==> 检查npm,node.js版本; 3)utils.js ==> 构建相关工具方法; 4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀; 5)webpack.base.conf.js ==> webpack基本配置; 6)webpack.dev.conf.js ==> webpack开发环境配置; 7)webpack.prod.conf.js ==> webpack生产环境配置; 2、config:项目配置 1)dev.env.js ==> 开发环境变量; 2)index.js ==> 项目配置文件; 3)prod.env.js ==> 生产环境变量; 3、node_modules:npm 加载的项目依赖模块 4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: 1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建; 2)components:组件目录,我们写的组件就放在这个目录里面; 3)router:前端路由,我们需要配置的路由路径写在index.js里面; 4)App.vue:根组件; 5)main.js:入口js文件; 5、static:静态资源目录,如图片、字体等。不会被webpack构建 6、index.html:首页入口文件,可以添加一些 meta 信息等 7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息 8、README.md:项目的说明文档,markdown 格式 9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
三、编写第一个demo
1、在components目录下新建一个views目录,里面写我们的vue组件
1)开始我们的第一个组件:
a:在views目录下新建First.vue
b:在router目录下的index.js里面配置路由路径
![437fec8edcf41e7c5b4646dd60ca02cb.png](https://img-blog.csdnimg.cn/img_convert/437fec8edcf41e7c5b4646dd60ca02cb.png)
c:在First.vue 中写 html,script写 js,style写样式
![b93f3f7be94a1791afd3c8e77fa311bb.png](https://img-blog.csdnimg.cn/img_convert/b93f3f7be94a1791afd3c8e77fa311bb.png)
正确示例
访问 http://localhost:8083/#/first 查看效果
![0e0b101782dbfe9a1779ca6d4a3f48fb.png](https://img-blog.csdnimg.cn/img_convert/0e0b101782dbfe9a1779ca6d4a3f48fb.png)
错误写法提示
2、父子组件
在components目录下新建sub文件夹,用于存放一下可以复用的子组件。比如新建一个Confirm.vue组件
![d7b430a1a0f54a628710059a1bb7af16.png](https://img-blog.csdnimg.cn/img_convert/d7b430a1a0f54a628710059a1bb7af16.png)
3、在父组件中引入子组件
引入:import Confirm from '../sub/Confirm'
注册:在标签内的 name代码块后面加上 components: {Confirm}
使用:在内加上
![715872222438037d84eed79bc3788e89.png](https://img-blog.csdnimg.cn/img_convert/715872222438037d84eed79bc3788e89.png)
![da163c46ebe47d24639471fa8a00ebf5.png](https://img-blog.csdnimg.cn/img_convert/da163c46ebe47d24639471fa8a00ebf5.png)
![ede49f214e7ff9ce0032252f72906a1d.png](https://img-blog.csdnimg.cn/img_convert/ede49f214e7ff9ce0032252f72906a1d.png)
4、如何用scss写样式
1)安装scss依赖:npm install sass-resources-loader --save-dev
![db0bef914a3f932548ccc62bd27c5cbe.png](https://img-blog.csdnimg.cn/img_convert/db0bef914a3f932548ccc62bd27c5cbe.png)
package.json
![bb25b79cdb27355ea98c919490eefbfe.png](https://img-blog.csdnimg.cn/img_convert/bb25b79cdb27355ea98c919490eefbfe.png)
![81dd079cc8176174203d2f9c284b4084.png](https://img-blog.csdnimg.cn/img_convert/81dd079cc8176174203d2f9c284b4084.png)