如何从0到1创建一个vue项目

完整地址：https://github.com/jiuchengTk279/vueDemo

1. 第一步，安装vue-cli脚手架，通过 npm install -g @vue/cli 或者 cnpm install -g @vue/cli 命令进行安装
   

2. 第二步，使用vue-cli脚手架创建项目，通过vue init webpack vuDemo命令，最后一个为项目的名称，可以自己命名，使用了webpack打包工具
   
   如图所示，需要确认以下的信息：
   1）Projetc name 是项目的名字，选择确认
   2）Project description 是项目的描述，选择确认
   3）Author是作者，选择确认
   4）Vue build 是vue的构建，选择为独立的
   5）Install vue-router 是vue的路由，选择确认下载vue路由
   6）Use ESLint 是ESlint的严格语法，确认是ESLint严格语法在项目的代码中
   7）Pick an ESLint preset 是选择ESLint的预设，选择标准的预设
   8）Set up unit tests 是创建单元测试，选择不创建单元测试
   9）Setup e2e tests 是创建e2e测试，选择不创建
   10）Should we run npm install 是选择npm进行下载创建项目，选择是npm
   11）之后项目就会被创建了，如图所示
   
   项目创建成功以后，如图所示

3. 第三步，切换到创建的项目中，通过 cd vueDemo 命令进行切换，后面为项目的名称

4. 第四步，运行项目，通过 npm run dev 命令进行运行项目
   
   项目运行成功后，如图所示
   
   创建的项目文件夹如下所示：

5. 第五步，在浏览器中打开网址，输入 http://localhost:8080，出现如下的图片，说明vue的项目已经创建成功了

6. 第六步，如果我们所做的项目是移动端的项目，我们需要进行一些设置。在项目文件最外层的 index.html 中，设置 meta 标签中的 viewport , 将 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no ， 这样就可以确保移动端用户放大或者缩小的操作是无效的，屏幕比例始终为1 : 1。
   代码所示如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

7. 第七步，在移动端项目中，我们也需要引入一些文件，解决一些问题，可以在 main.js文件中引入。
   1）引入 reset.css， 可以进行样式的重置，帮助我们构建移动端项目中的一些样式问题。
   2）引入 border.css，可以解决 1像素边框的问题，1像素边框也是移动端项目常见的问题。
   3）引入 fastclick，可以解决 300ms 点击延迟的问题，通过 npm install fastclick --save 命令进行下载，如下图所示：
   
   在下载完fastclick以后，然后 import fastClick from 'fastclick' 以及 fastClick.attach(document.body) 去进行使用
   代码所示如下：

import fastClick from 'fastclick'
import './assets/styles/reset.css'
import './assets/styles/border.css'

Vue.config.productionTip = false
fastClick.attach(document.body)

8. 最后，如果想要看完整的项目代码，可以去我的 github项目地址上看。如果觉得还不错，可以点一个star，谢谢了，地址如下：
   https://github.com/jiuchengTk279/vueDemo