projeceDemo1-借助@vue/cli包创建脚手架项目

前言:借助于@vue/cli包提供的脚手架搭建项目,可以让我们快速搭建项目基本环境.Vue官方提供的脚手架是一套标准的文件夹+文件结构+webpack配置,可以做到零配置开箱即用十分便捷

前置准备:你的电脑一定要装过node或者yarn

接下来就进入创建项目步骤啦~~

一、全局安装@vue/cli模块包

1.安装@vue/cli全局模块包,得到Vue命令,以后就可以用vue命令创建脚手架项目

//yarn 命令
yarn global add @vue/cli
//npm 命令
npm install -g @vue/cli

2.如发现半天不动没动静，也许会是网络问题，ctrl+c 停止 重来再试一次,或者换个网络

3.判断自己是否安装完成,输入命令查看Vue版本

vue -v

   得到vue版本则正确

二、项目创建

1.创建项目

建议用cmd终端创建项目

进入cmd的方法:

// vue和create是命令, my-demo是自己的文件夹名
vue create my-demo

 2.采用自定义方式去创建项目

上下箭头切换,回车确认,空格选中 (选中 Manually select features   ->自定义方式创建)

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features  

3.手动选择特性

Babel, Router, Vuex, CSS Pre-processors, Linter

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  

4.版本Vue2.x

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 

5.路由是否使用history模式：不采用 (N)

 6.css 预处理器: 使用less

 7.eslint语法风格：Standard (一定)

 8.检查节点：保存时检查，提交时检查 (提交时可以不选)

 9.存储插件配置位置：单独放在不同的文件中 

 10.接下来，它会问你是否要保存前面的设置作为预设方案，以便后续创建其它项目时直接使用。

• 你可以选择N(不保存)
• 如果选择Y, 保存, 以后就可以一键完成以上步骤

11.耐心等待一下下,创建完毕, 进入文件夹, 启动项目

12.注意:

一定要直接打开自己的项目文件夹,方便后面代码书写启用ESLint语法检查,接下来就可以愉快的敲代码啦!!