创建vue项目

一、命令行窗口创建

1.打开命令行窗口，切换到要保存项目的目录，如下图:

2.使用下面命令创建项目

vue create 项目名

运行之后，稍等片刻，进行下面界面，使用空格进行选择

选好之后回车，如下图蓝色选项所示进行选择。其中最后一项保存预设为 mypreset5，这个名字自拟。下次再创建vue工程时，如果选项不变，可以直接选择mypreset5，而不用再选择一遍。

回车运行，成功会提示下图红框中的两个命令，执行这两个命令，启动serve：

run serve后给出如下图的地址。注意该窗口不能关闭

将local网址复制到浏览器中，可以打开如下所示vue页面：

 

此时，vue工程已经创建好了。

二、打开项目

用vs code打开项目，装两个插件：

Vue 2 snippets  和  vetur，加上以前的open in browser，共三个。

项目目录说明及清理：

1.把用于版本控制的.git文件夹删掉，.gitignore文件删掉

2.在vscode中打开项目，src/components/Helloworld.vue删掉

3.Public:存放web资源文件，不参与编译，直接原样打包。可以通过浏览器直接访问到，不安全。

4.Index.html文件为唯一的一个html页面。

5.Src：写代码

6.Assests：存放web资源文件（例如logo），参与编译。清空

7.Components：组件目录，存放自定义的公共组件。目录清空

8.Router：路由配置。不删，修改其下的index.js ：

删掉import Home from '../views/Home.vue'  （因为home.vue删掉了）

Routes数组中的内容清空，修改后如下：

9.Views：vue页面组件目录（路由组件）。其下面两个页面删掉

10.App.vue：核心组件

进行修改：

只保留第一个div，Style中的样式删掉，删完如下：

 11.Main.js保存不变

12. 清理完项目目录后，保存所做修改，重新运行一下项目npm run serve，确保修改无误。如下图所示：

13. 最后把通用样式文件reset.css放到layout文件夹下。