一、nodejs装置和淘宝镜像装置

下载网站：https://nodejs.org/en/ （一路next即可）

查看node 版本

node -v

永恒应用淘宝镜像命令：

npm config set registry https://registry.npm.taobao.org

二、vue-devtools 装置及应用

vue-devtools是一款基于chrome浏览器的插件，用于调试vue利用，这能够极大地提高咱们的调试效率。接下来咱们就介绍一下vue-devtools的装置。

（1）chrome商店间接装置

vue-devtools能够从chrome商店间接下载安装

（2）手动装置

① 找到vue-devtools的github我的项目，并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
② 装置我的项目所须要的npm包
npm install
③ 编译我的项目文件
npm run build
④ 增加至chrome浏览器

浏览器输出地址"chrome://extensions/"进入扩大程序页面，点击"加载已解压的扩大程序..."按钮，抉择vue-devtools>shells下的chrome文件夹。

如果看不见“加载已解压的扩大程序...”按钮，则须要勾选“开发者模式”。

三、vue-cli 装置及应用

(1) 装置vue-cli

npm install @vue/cli -g

(2) 创立一个我的项目

vue create <Project Name>` `//文件名 不反对驼峰（含大写字母）

具体操作如下：

1.抉择一个preset（预设）

① 除最初两个选项，其余选项都是你之前保留的预设配置（如下图第一个 " my-default " 是之前保留的预设配置，当初就能够间接用了）

② 如果没有配置保留过，则只有以下两个选项：

default（babel，eslint）：默认设置（间接enter）适宜疾速创立一个新我的项目的原型，没有带任何辅助性能的 npm包
Manually select features：自定义配置（按方向键 ↓）是咱们所须要的面向生产的我的项目，提供可选性能的 npm 包

2.自定义配置须要抉择你须要的配置项

? Check the features needed for your project: >( ) Babel //转码器，能够将ES6代码转为ES5代码，从而在现有环境执行。( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）蕴含并扩大了 JavaScript 的语法，须要被编译输入为 JavaScript在浏览器运行，目前较少人再用( ) Progressive Web App (PWA) Support// 渐进式Web应用程序( ) Router // vue-router（vue路由）( ) Vuex // vuex（vue的状态管理模式）( ) CSS Pre-processors // CSS 预处理器（如：less、sass、stylus）( ) Linter / Formatter // 代码格调检查和格式化（如：ESlint）( ) Unit Testing // 单元测试（unit tests）( ) E2E Testing // e2e（end to end） 测试
3. 抉择对应性能的具体工具包

① 是否应用history router

Vue-Router 利用了浏览器本身的hash 模式和 history 模式的个性来实现前端路由（通过调用浏览器提供的接口）

② css预处理器

次要为css解决浏览器兼容、简化CSS代码 等问题

③ ESLint：

提供一个插件化的javascript代码检测工具，ESLint + Prettier //应用较多

④ 何时检测：在保留或提交时 进行link查看

单元测试

? Pick a unit testing solution: (Use arrow keys)  Mocha + Chai   //mocha灵便,只提供简略的测试构造，如果须要其余性能须要增加其余库/插件实现。必须在全局环境中装置 > Jest   //装置配置简略，容易上手。内置Istanbul，能够查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰盛的expect

⑤ 如何寄存配置 ：

⑥ 是否保留本次配置（y:记录本次配置，而后须要你起个名; n：不记录本次配置）

⑦ 搭建实现:依照提醒启动我的项目

（3） 可视化我的项目

vue ui

四、目录构造

|-- src             // 源码目录|  |-- components   // vue公共组件|  |-- router       // vue的路由治理|  |-- App.vue      // 页面入口文件|  |-- main.js      // 程序入口文件，加载各种公共组件|-- public          // 动态文件，比方一些图片，json数据等|  |-- favicon.ico   // 图标文件|  |-- index.html   // 入口页面|-- vue.config.js    // 是一个可选的配置文件，蕴含了大部分的vue我的项目配置|-- .babelrc        // ES6语法编译配置|-- .editorconfig   // 定义代码格局|-- .gitignore      // git上传须要疏忽的文件格式|-- .postcsssrc     // postcss配置文件|-- README.md       // 我的项目阐明|-- package.json    // 我的项目根本信息,包依赖信息等

依据须要在根目录下新建 vue.config.js自行配置，eg：（简略配置，更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

module.exports = {  baseUrl: '/',// 部署利用时的根门路(默认'/'),也可用相对路径(存在应用限度)  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被革除)  assetsDir: '',//搁置生成的动态资源(s、css、img、fonts)的(绝对于 outputDir 的)目录(默认'')  indexPath: 'index.html',//指定生成的 index.html 的输入门路(绝对于 outputDir)也能够是一个绝对路径。  pages: {//pages 里配置的门路和文件名在你的文档目录必须存在 否则启动服务会报错    index: {//除了 entry 之外都是可选的      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件      template: 'public/index.html',// 模板起源      filename: 'index.html',// 在 dist/index.html 的输入      title: 'Index Page',// 当应用 title 选项时,在 template 中应用：<title><%= htmlWebpackPlugin.options.title %></title>      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中蕴含的块，默认状况下会蕴含,提取进去的通用 chunk 和 vendor chunk    },    subpage: 'src/subpage/main.js'//官网解释：当应用只有入口的字符串格局时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输入文件名会被推导为'subpage.html'  },  lintOnSave: true,// 是否在保留的时候查看  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件  css: {    extract: true,// 是否应用css拆散插件 ExtractTextPlugin    sourceMap: false,// 开启 CSS source maps    loaderOptions: {},// css预设器配置项    modules: false// 启用 CSS modules for all css / pre-processor files.  },  devServer: {// 环境配置    host: 'localhost',    port: 8080,    https: false,    hotOnly: false,    open: true, //配置主动启动浏览器    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )      '/api': {        target: '<url>',        ws: true,        changeOrigin: true      },      '/foo': {        target: '<other_url>'      }    }  },  pluginOptions: {// 第三方插件配置    // ...  }};

五、vue 相干依赖的装置命令

npm install axios --save-dev //装置axiosnpm install mockjs --save-dev   //装置mockjsnpm install vue-lazyload --save-dev    //装置 vue-lazyloadnpm install vue-cookie --save-dev     //装置vue-cookie npm install element-ui --save-dev   //装置 element-uinpm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev  //一次装置多个依赖

参考网站

https://www.cnblogs.com/coober/p/10875647.html