vue项目搭建

在使用vue搭建一个项目时，有一下两种方法：

1. script脚本引入
2. cli脚手架的方法（①从github克隆；②npm安装）

首先，第一种script脚本引入的方法，可以快速上手，不需要太多的前期配置，引入即可使用；但是，脚本引入导致浏览器加载页面速度变慢，影响用户体验。个人觉得，一般脚本引入的方法试用于初学者练习vue或者对页面加载速度要求不高的网站。

一、脚本引入方法
官网里是这样介绍的：
① 对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

② 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

以上脚本引入这两个方法，根据你的需求引入一个即可；

其次，第二种npm安装vue脚手架的方法。这种方法，在实际的vue项目开发是必须的，前期需要自行搭建脚手架，相对脚本引入来说比较麻烦，但是，对于开发者开发过程和用户对于页面加载效率的体验是非常好的。(推荐使用)

注意：vue脚手架安装，前提必须有：vue、node.js、npm

① github官网克隆安装vue脚手架。

 // 找一个空的文件夹，在当前文件夹下打开cmd，执行以下命令（克隆）：
 //（克隆好以后，就已经安装好vue脚手架了）
 git clone https://github.com/vuejs/vue.git node_modules/vue
 // 移动到克隆好的文件夹下的vue目录下：
 cd node_modules/vue
 // 安装依赖包
 npm i
 // 此时，一个完整的vue脚手架已经搭建完毕。可以正常写自己的项目了。
 // 如果，需要预览页面，可以执行： (浏览器中输入 localhost:8080 回车)
 npm start
 // 如果，要打包项目，可以执行：
 npm run build

② npm 安装vue脚手架。(本机必须有node.js，如果没有的小伙伴，可以去node官网直接下载，node自带npm，这里附一个传送链接：Node官网 ，node推荐下载长期支持版)

 // 同上，需要在空的目录下打开cmd，执行
 npm i vue // （没有vue的，需要安装下vue，要不后面会提示vue不是内部或外部命令）
 // 脚手架安装
 npm i -g @vue/cli
 // 安装完成后，可以测试一下是否安装成功(如果出现版本号，说明安装成功！）
 vue -V // 注意：这里的V是大写！
 // 使用脚手架创建一个vue项目：
 vue init webpack mypro1 // mypro1是项目名称，可以自行修改
 /*  
 **这里会有一些脚手架初始化的配置询问：**
 
 1.Project name：项目名，可以直接回车（默认mypro1），也可以自己修改。
 2.Project description：项目描述，直接回车
 3.Author：作者是谁，随便填或直接回车
 4.Vue build：选择题，一般选第一个
  4.1 Runtime + Compiler: recommended for most users//运行加编译，官方推荐，就选它了
  4.2 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue filesrender functions are required elsewhere//仅运行时，已经有推荐了就选择第一个了
 5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
 6.Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N 新手就不用了，但实际项目中一般都会使用。
 7.Set up unit tests：是否安装单元测试 ，输入N
 8.Setup e2e tests with Nightwatch?：是否安装e2e测试，输入 N
 9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM   选择npm。
 继续回车，这样就好了，静待安装即可！
 */
 // 以上步骤，脚手架安装完毕
 // 接下来，进入到项目目录下：
 cd mypro1
 // 同上，预览项目，执行: (浏览器中输入 localhost:8080 回车)
 npm start
 // 打包项目，执行
 npm run build