vue项目创建(自用)

vue项目创建

  • vuecli2、3脚手架搭建

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)

vue项目创建(自用)_第1张图片
项目运行…

npm run dev

(2)vue-cli3初始化项目
创建项目命令行…

vue create 项目名

…选择配置…
vuecli3是因为上一次记录过的cli3配置
可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行
vue项目创建(自用)_第2张图片
选择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 测试。vue项目创建(自用)_第3张图片
css的预处理
vue项目创建(自用)_第4张图片
ESLint 选择
vue项目创建(自用)_第5张图片
选择语法检查方式
第一个是保存就检测,第二个是fix和commit的时候检测
vue项目创建(自用)_第6张图片单元测试
vue项目创建(自用)_第7张图片
配置文件存放地方
第一个是独立文件夹位置,第二个是在package.json文件里
vue项目创建(自用)_第8张图片
是否记录这一次的配置,以便下次使用vue项目创建(自用)_第9张图片
配置完成 项目启动

npm run serve

你可能感兴趣的:(vue项目创建(自用))