Vue项目创建

项目准备

1.安装node

安装node，成功以后执行命令：

node -v

npm -v

出现如下界面即为安装成功

2.安装vue-cli

npm i vue-cli -g

版本不够不用管

3.安装webpack

npm i webpack -g

4.安装webpack-cli

npm i webpack-cli -g

安装脚手架

以管理员身份运行黑窗口，否则后面步骤权限不够

1.创建项目文件夹

2.切换到此文件夹下

3.创建项目

vue create是vue CLI 3唯一的命令，正在使用vue CLI 2.9.6。安装的版本太低，需要更新vue

4.更新vue

执行提示代码进行更新

npm uninstall -g vue-cli

npm install -g @vue/cli

5.再次进行创建

由于我是在国内操作的，访问比较慢，所以弹出一个信息询问我们是否加速，输入y

6.基于Manually select features（手动创建）脚手架

7.选择需要配置的项

通过键盘方向↑ ↓ 箭头选择需要配置的项，按 空格 选中 指定项，按 a 是全选，按 i 是反选，选好后回车

Babel—用来屏蔽和解决浏览器的兼容性

TypeScript—脚本语言,比JS强大点

Progressive Web App (PWA) Support— 渐进式的web框架

Router vue—路由

Vuex

CSS Pre-processors—css预处理器

Linter/Formatter—约束团队代码风格,例如规定单引号必须整个团队都是单引号风格,如果有用双引号的会直接代码报错,还有不允许多余空格,出现多余空格就报错(不建议安装)

Unit Testing—单元测试

E2E Testing—E2E测试

8.选择vue版本

9.是否使用history模式的路由

10.对应Babel, ESLint等配置的位置

In package.json 把插件的配置信息和package.json文件写在一起

11.存为模版并命名

12.启动项目

npm run serve

 访问本地路径

路由

使用WebStorm打开项目

1.在views或components下创建vue文件

2.输入内容

在<template>标签里写一个div，输入要在页面输出的内容

注：<template>标签里只能有一个根标签

3.使用路由

在组件里面配置路由的路径

注：@相当于src，路径写正确，不能加空格

4.访问