一、命令行窗口创建
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文件夹下。