## 技术栈 * npm ： node.js的包管理工具，管理前端项目需要用到的包、插件、工具和命令等 * ES6 ， ECMAScript6的简称， 是JavaScript的新版本 * vue-router Vue.js 配套路由 * Element ， UI框架 * vue-cli, Vue的工具， 可以自动生成Vue项目 * vue-router , Vue提供的前端路由工具。用于实现页面的路由控制和局部刷新， 实现前后端分离。 * vuex ： Vue提供的状态管理工具。管理项目中各种数据的交互和重用，存储需要使用的数据对象。 * webpack: 文件打包工具。将前端项目文件打包压缩到一个js文件中，使用vue-loader等加载器实现语法转换和加载。 ## 环境及版本 * Windows 10, 64 bit * Node.js v12.18.3-x64 * @vue/cli@4.5.4 Vue CLI v4.5.4 * ## 创建Vue项目框架 1. 安装Node.js https://nodejs.org/zh-cn/ ## 设置模块安装位置 ``` npm config list npm config set prefix "D:\install\nodejs\node_global" npm config set cache "D:\install\nodejs\node_cache" ```  这里D:\install\nodejs 是本地机器得Node.js得安装路径. node_global配置后会自动创建, 用来存放全局得模块. 3. 安装Vue CLI （全局安装） ``` npm install -g @vue/cli ``` * Vue CLI 是Vue的脚手架工具， 可以用来创建项目。 4. 创建Vue项目 ``` vue create my-vue-ele ``` Vue Cli 3及之前的版本使用的是以下命令创建。 ``` vue init webpack 项目名 ``` 2. 安装Vue (当前目录) ``` npm install vue ``` * 可以全局安装，但建议不全部安装。因为在同一台机器基于不同版本的Vue进行开发。 5. 安装依赖 进入项目路径， 执行 ``` npm run dev ``` ## 安装Element UI 1. 安装 ``` npm i element-ui -S ``` 2. 在app.vue中引入 element-ui ## webpack +sass ``` npm install sass --save-dev npm install style-loader css-loader sass-loader --save-dev ``` less ： css预处理语言， 拓展了css,增加了变量 ， Mixin等 * sass-loader用来打包 * style-loader和css-loader 将sass解析成css ## 项目目录和文件说明 * build ## 出错问题解决 ``` npm WARN saveError ENOENT: no such file or directory, ```  ``` npm uninstall vue ``` 卸载并删除 package-lock.json ### ``` npm install vue-router npm install vue-router --save-dev npm install vuex --save npm install --save stylus-loader stylus ``` * common/local-storage 本地存储 *