VSCode中创建Vue项目

一、 搭建环境

1. 安装node.js与git，还有编辑器VSCode
2. 检查node与npm版本，切换公司源或淘宝镜像
3. 全局安装vue-cli脚手架工具：npm install –g @vue/cli，（安装Vue Cli3.x版本才能使用Vue create命令）。如果事先安装了2.x的话，可以先卸载执行以下命令再重新安装：npm uninstall –g vue-cli
4. 检验是否安装成功的方法：检查vue的版本，输入命令：vue –V

二、 创建项目与安装相关依赖

1. 在VSCode打开想要创建项目的文件夹，ctrl+~打开终端，输入：Vue create project_name / Vue init webpack ProjectName
2. 构建完成后依据提示cd和run
3. 安装H-UI/Element UI：npm i element-ui -S；安装webpack：npm install webpack --save dev
4. 打包命令：npm run build，生成dist文件打包给后台，项目路径中要采用相对路径

三、 创建单文件组件

     首先工程目录/src下创建components文件夹，创建一个单文件组件，格式如app.vue格式，template，script，style。然后在 App.vue 使用组件 ( 因为index.html 里面定义了div id=“app” /div所以就以这个组件作为主入口)，使用组件的步骤如下：

1. 引入：在标签内的第一行写

import firstcomponent from './component/firstcomponent.vue'

2. 注册：在标签内的 data 代码块后面加上

components: { firstcomponent } 			// 多组件用逗号分隔

3. 使用：在template标签内内加上firstcomponent标签

四、 关于目录结构

Src下（简写 @ 例如@/components/HelloWorld）

• 创建文件夹utils作为工具函数，里面放置工具函数的js文件。每个函数通过export对外提供
• 创建components放置公用组件
• 搭建路由：首先引入vue-router，新建文件夹router，下设置index.js文件（如果采用vue init命令，可以选择安装router，这些文件夹已经生成），里面配置路由路径和对应的组件，然后去main.js注册，上面引入下面注册，之后运行输入地址就OK了。（温馨提示：在配置路由前加一个mode:‘history’,就可以去掉地址栏中的‘#’），如果想制作导航，在APP.vue中增加router-link，to后面写路由配置的path。
• 待补充