### 使用npm创建 1. 安装node.js ``` npm config set prefix "D:\inssoftware\nodejs" ``` D:\inssoftware\nodejs 是NodeJS的安装路径， 需要指定该路径。 否则安装后无法使用 vue命令，除非再添加环境变量。 ``` npm install vue npm install vue-router ``` 2. 安装 vue-cli `npm install --global vue-cli` 和Maven很类似， 默认的目录是：C:\Users\XXXX\AppData\Roaming\npm\node_modules 全局模块插件存放路径 3.初始项目 `cd D:\devworkspace\nodejs` `vue init webpack my_vue_project` 以上命令会交互式进行创建项目， 会询问是否要测试等都能问题，如果使用默认的设置，可以加 -y。 -y 使用默认设置 ``` vue -y init webpack my_vue_project ``` 4. 项目目录结构 * build: 使用webpack构建的代码 * config : 配置目录， 包括端口号等 * src : 源码目录 * assets : 图片等 * components : 组件文件 * App.vue 项目入口文件 * main.js 项目的js核心文件 * router: Vue路由文件目录，在router/index.js 中定义不同url的不同的内容 * static: 静态资源目录，如图片，字体 * test 测试目录 * index.html 首页入口文件 * package.json 项目配置文件 * README.md 项目说明文档， markdown格式 5.运行项目 ``` npm run dev ``` 6. 安装Element UI ``` npm i element-ui -S ``` 7. 在src/main 中引用 element-ui ``` importElementUIfrom'element-ui' import'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI) ``` ElementHelloWorld.vue ``` <template> <div class="CopClass"> <h1>{{msg}}</h1> <h2>按钮效果</h2> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="text">文字按钮</el-button> </div> </template <script> export default{ name:'CopName', data(){ return { msg : 'Vue + Element-UI 页面' } } } </script> ``` router/index.js ``` Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/enter/', name: 'CopName', component: CopClass } ] }) ``` http://localhost:8080/#/enter