一、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、选择路由模式

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、是否保存刚刚的选择，成为一个新的项目模板

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

从头到尾创建一个vue全家桶项目相关推荐

VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局一.页面布局二.创建Home组件三.路由index.js 文件配置主页路径四.添加welcome组件一.页面布局 <el-container& ...
Vue全家桶-项目实战笔记
写在前面这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记,主要记录思路,内容不完整,这里只写到了用户列表管理,进来的友友们可以根据目录,看是否有自己需要的功能这篇笔记记录的是基础vue ...
如何实现一个React全家桶项目（附完整教程及代码）
文章目录如何实现一个React全家桶项目(附完整教程) 1.相关命令: 运行项目: `yarn start` 项目打包: `yarn build` 暴露配置项: `yarn eject` 2.项目目 ...
Vue全家桶项目创建指南
切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车习惯项目名小 ...
小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
vue全家桶项目搭建（vue-cli 2.9.6+vue-router+vuex+axios）
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
Vue全家桶构建项目
步骤一.安装vue-cli 首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过 node -v 查询node的版本号,有版本号则已经安 ...
VUE全家桶 REACT jQuery
VUE VUE.js是一款JavaScript框架,Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. VUE只关注视图层,Vue 的目标是通过尽可能简单的 AP ...

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

一、vue全家桶有哪些

二、创建全家桶项目

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

解决方案：

elementui报错问题：

解决方案：

从头到尾创建一个vue全家桶项目相关推荐

最新文章

热门文章