使用vs Code从0开始搭建一个vue项目(手把手教会你，包会)

一、准备工作:
  //提前安装node.js
  下载地址https://nodejs.org/zh-cn/，然后一步一步傻瓜式安装即可;
  在console控制台使用node -v,  npm -v, 如果正常显示版本, 就是安装成功。

  
  //全局安装vue-cli, 已经安装了, 就跳过这一步;
  npm install -g vue-cli

  
  //解决npm安装慢的问题
  npm install –registry=https://registry.npm.taobao.org
  (使用npm config list 可以查看安装是否成功)
  

二、准备完毕, 现在进入正题:

以下操作, 都是在vs code的Terminal里面执行的。
1.在本地磁盘创建一个自己的项目, 我的项目叫做vue-demo
 进入你打算存放代码的文件目录(我存放在E:\front-workspace\vue)：

 

然后执行命令：

vue init webpack vue-demo

然后回车

生成项目名为vue-demo的模板, 然后回车(不支持包含大写的项目名称)。

2.在安装时会询问下面的事项, 根据需要选择Y/n:

先放个图, 镇楼, 下面详细阐述：

 

1)Project name (vue-demo)；项目名称(vue-demo)。(直接回车)
 2)Project description  (A Vue.js project)；项目描述(一个vue.js项目)。(直接回车)
 3)Author ；作者。(这里我要装逼一哈， 署名Ferdinand, 毕竟这个代表是Ferdinand写的, 然后回车)
 4)Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
  直接回车

 5)Install vue-router? (Y/n)；安装的路由？(Y/ n)。(可安可不安，以后也可以再安，根据需求选择)
  比如我就选择n, 回车
 6)Use ESLint to lint your code? (Y/n)；使用ESlint语法？(Y/  n)。(使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，我就被逼疯过，建议n)
 7)Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？(Y / N)。(选N)
 8)Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？(Y / N)。(选N)
 9)Should we run `npm install` for you after the project has been created? (recommended)  
 一般选择npm这一个

 

操作完成, 会看到这样的界面:

3.cd vue-demo
进入刚才创建的项目

4.npm install
初始化安装依赖

5.npm run dev
执行完成之后, 在浏览器打开http://localhost:8080，则可以看到欢迎页了。代表vue项目创建成功。

6.其他
如何在我们自己的服务器上访问呢？
此时需要执行（前面有个点）：
· npm run build
这样会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。