从头到尾创建一个vue全家桶项目

一、vue全家桶有哪些

全家桶：vue, vue-router, vuex, axios, elementui

vue-router: 路由

vuex: vue状态机

axios: 网络请求工具

elementui: 快速原型工具

二、创建全家桶项目

1、创建vue项（创建vue看上一遍文章）

选择模板，我们选择自定义Manually select features

Please pick a preset:
vue-full ([Vue 2] dart-sass, babel, router, vuex, eslint)
vue-full2 ([Vue 2] babel, router, vuex, eslint)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features

2、选择插件

空格键选中某个插件，回车键下一步

Babel, Router, vuex, Linter/Formatter

Check the features needed for your project: (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
>( ) E2E Testing

3、选择vue版本

2.x

Choose a version of Vue.js that you want to start the project with
3.x
> 2.x

4、选择路由模式

y

Use history mode for router? (Requires proper server setup for
index fallback in production) (Y/n)y

5、选择lint语法检查的模式

ESLint with error prevention only

Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only //出错时提示
ESLint + Airbnb config //严格
ESLint + Standard config //标准
ESLint + Prettier //一般

6、lint语法检查的时机

Lint on save

Pick additional lint features: (Press <space> to select, <a> to
toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save //保存文件时检查
( ) Lint and fix on commit //文件提交到git时检查。

7、是否使用独立的配置文件

In dedicated config files

Where do you prefer placing config for Babel, ESLint, etc.? (Use
arrow keys)
> In dedicated config files
In package.json

8、是否保存刚刚的选择，成为一个新的项目模板

y

Save this as a preset for future projects? (y/N)y

9、给新建的项目模板起一个名字(名字自己取，必须是英文)

demo

Save preset as:demo

10、创建完成的提示信息:

Successfully created project test9.
Get started with the following commands:

11、安装elementui

• 切换到项目根目录

  一定要能找到package.json文件

  2022/09/13 16:40 73 babel.config.js
  2022/09/13 16:40 279 jsconfig.json
  2022/09/13 16:40 <DIR> node_modules
  2022/09/13 16:40 768,680 package-lock.json
  2022/09/13 16:40 704 package.json
  2022/09/13 16:40 <DIR> public
  2022/09/13 16:43 317 README.md
  2022/09/13 16:40 <DIR> src
  2022/09/13 16:40 118 vue.config.js
  9 个文件 770,791 字节
  5 个目录 176,342,962,176 可用字节
  
  C:\project\WN24\code\9-13\test9>

• npm i element-ui -S

  -S是保存到package.json的dependencies位置

  -D是保存到package.json的devDependencies位置

12、安装node-sass、sass-loader

node-sass运行在node环境中用于编译sass样式的语法。sass-loader让webpack能够识别sasss语法从而进行编译工作。

npm i node-sass sass-loader -D

注意：先安装element-ui，再安装node-sass和sass-loader

13、安装axios

npm i axios -S

14、配置elementui

main.js配置

//配置elementui
// 1. 导入elementui的js库和样式库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 2.加载elementui
Vue.use(ElementUI)

15、验证elementui

<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>

data() {
return {
value1: ""
}
},

注意：可能在创建项目的时候遇到问题

npm ERR! gyp ERR! cwd C:\project\WN24\code\9-13\test10\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.16.0

解决方案：

先删除node-sass, sass-loader

npm uninstall node-sass sass-loader

手动安装node-sass, sass-loader（需要使用淘宝的镜像）

npm install node-sass --sass-binary-site=https://npm.taobao.org/mirrors/node-sass -D
npm install sass-loader -D

elementui报错问题：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"
found in
---> <ElDatePicker> at packages/date-picker/src/picker.vue

解决方案：

换elementui版本

npm uninstall element-ui
npm install element-ui@2.15.8 -S