VUE项目构建

1. 了解vue

用vue官方的语言便是：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 准备工作

• 开发工具

我用的开发工具是VScode，是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。
下载地址：https://vscode.en.softonic.com/
汉化方法：点击①（快捷键：Ctrl+ Shift+ x ）打开扩展功能，在②处搜索Chinese，选择安装并重新启动VScode。

• node.js安装

下载地址：https://nodejs.org/zh-cn/
下载完成后，直接安装即可
验证是否安装成功：
win+r运行cmd

分别输入node -v和npm -v进行验证是否成功，如果成功则是显示你的安装版本号

• cnpm安装

直接用 npm 安装库非常慢,容易安装失败,简直是浪费时间,使用代理或者库镜像又比较麻烦,最好的解决方案是使用淘宝镜像 cnpm替代npm
在刚刚的验证基础上输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

验证cnpm安装是否成功

• 全局安装vue脚手架

在刚刚的基础上输入输入 ：npm install -g @vue/cli

输入：vue -V 验证是否安装成功，成功则显示版本号

3.项目构建

项目构建可以采用：可视化构建和命令行方式创建

• 可视化构建
  输入：vue ui
  在浏览器中打开：http://localhost:8000
  
  选择创建并选择自己所保存项目的位置，最后点击【在此创建新项目】
  
  然后根据自己的情况进行命名和选择，在包管理器这里我习惯性使用npm
  
  在选择预设是时一般选择手动配置，根据需求情况进行配置，
  其中里面的功能配置，我已经做了详细的解释下面打(!)的为必须选择。
  (!) Choose Vue version // 视图版本
  (!) Babel // ES6代码转为ES5代码。
  ( ) TypeScript // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）
  ( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
  (!)Router // vue-router路由
  (!) Vuex // vuex状态管理模式）
  (!) CSS Pre-processors // CSS 预处理器
  (!)Linter / Formatter // 代码风格检查和格式化
  ( ) Unit Testing // 单元测试（程序员的角度测试）
  ( ) E2E Testing // 测试（站在用户用度）

最后根据自己的情况选择完成创建。

• 命令行方式创建
  先将自己要存放项目的文件夹放入到VScode的工作区内
  
  
  右击目标文件夹，选择【在集成终端中打开】便添加到终端里面了
  
  接下来我们在终端里面，创建新的项目：vue init webpack 【命名】(例如：vue init webpack new-project)，假如出现了下面这种情况，在开始处搜索powershell，以管理员的身份运行。然后输入下面的指令：set-ExecutionPolicy RemoteSigned。然后重新创建就可以了
  
  
  
  接着创建就是对：①项目名称，②项目说明，③作者进行操作，无更改直接回车。对④时选择：Runtime + Compiler（运行时+编译器）
  
  ①安装路由器视图：yes
  ②Use ESLint to lint your code：yes（使用eslint依赖规范你的代码。为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量）
  ③Pick an ESLint preset (使用哪种语法规范来检查我们的代码)，选择Standard（标准）
  　　standard(https://github.com/feross/standard) js的标准风格
  　　Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
  　　none (configure it yourself) 自己配置
  
  ①Set up unit tests (是否安装单元测试) 选择：Yes
  ②Pick a test runner (选择一个单元测试运行器) 选择：karma
  ③Setup e2e tests with Nightwatch? (是否安装E2E测试框架NightWatch (e2e，也就是End To End，就是所谓的“用户真实场景”)–Yes
  ④Should we run npm install for you after the project has been created? (recommended)
  (译：项目创建后是否要为你运行“npm install”?这里选择包管理工具) --no,I will handle that myself
  选项有三个
  　　yes,use npm(使用npm)
  　　yes,use yarn(使用yarn)
  　　no,I will handle that myself(自己操作)
  
  最后分别进行cd new-project2、 npm install（或cnpm install）

4.完成创建

对要运行的项目进行在集成终端打开，输入npm run dev

最后我们点击打开http://localhost:8080，这样我们就完成了一个项目的创建

4.感言

至此，我们的项目已经完全创建完毕了，这只是我们学习的开始，我们将会遇到的问题会很多，大家不要气馁，要相信自己，如果这件事情很简单，人人都可以轻松做到，那么这个事情的意义和价值就大打折扣。所以我们要有坚定的理想信念，我们终将可以在这条路上成为自己想成为的人！