vue项目创建
vuecli2、3脚手架搭建
1.node下载:(vuecli3 要求node >=8.9)
官网:https://nodejs.org/en/
2.npm更新下载:(vuecli3 要求npm 更至最新)
npm install -g @vue/cli 或 yarn global add @vue/cli
3.安装vue-cli包
npm install -g @vue/cli 或 yarn global add @vue/cli
4.创建vue项目
(1)vue-cli2 初始化项目
创建项目命令行…
vue init webpack 项目名 或 vue init webpack-simple 项目名
…选择配置…
Project name (my-project) # 项目名称(我的项目) Project description (A Vue.js
project) # 项目描述一个Vue.js 项目 Author 作者(你的名字) Install vue-router? (Y/n) #
是否安装Vue路由,也就是以后是spa(但页面应用需要的模块) Use ESLint to lint your code? (Y/n) #
使用 ESLint 到你的代码? (Y [ yes ] / N [ no ]) Pick an ESLint preset (Use
arrow keys) # 选择一个预置ESLint(使用箭头键) Setup unit tests with Karma + Mocha?
(Y/n) # 设置单元测Karma + Mocha? (Y/ N) Setup e2e tests with Nightwatch?
(Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
项目运行…
npm run dev
(2)vue-cli3初始化项目
创建项目命令行…
vue create 项目名
…选择配置…
vuecli3是因为上一次记录过的cli3配置
可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行
选择Manually
…空格键是选中与取消,A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
css的预处理
ESLint 选择
选择语法检查方式
第一个是保存就检测,第二个是fix和commit的时候检测
单元测试
配置文件存放地方
第一个是独立文件夹位置,第二个是在package.json文件里
是否记录这一次的配置,以便下次使用
配置完成 项目启动
npm run serve