创建Vue项目3

最新推荐文章于 2024-06-12 11:28:06 发布

已无测试机

最新推荐文章于 2024-06-12 11:28:06 发布

阅读量663

点赞数 1

文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/DDJ_TEST/article/details/122616337

版权

源码https://gitee.com/WeiboGe2012/test-platform

创建Vue项目

Vue.js安装

1、安装Nodejs
2、验证

node -v
v16.13.2

npm -v
8.1.2

3、全局安装vue cli
https://cn.vuejs.org/v2/guide/installation.html
https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli

4、验证

vue --version

创建vue项目

在这里插入图片描述
1、在一个空白文件夹，右键打开“Windows PowerShell”
2、输入 vue create test-platform 创建项目，回车

PS E:\dome\test> vue create test-platform

3、选择：手动选择功能

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

4、选择安装插件
注：按上、下健切换选项，按空格键选择选项，按i键反选

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version					// 选择Vue版本
 (*) Babel
 ( ) TypeScript							// JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
 ( ) Progressive Web App (PWA) Support	// 渐进式Web应用程序
 (*) Router								// vue-router（vue路由）
 (*) Vuex								// vuex（vue的状态管理模式）
>(*) CSS Pre-processors					// CSS 预处理器（如：less、sass）
 (*) Linter / Formatter					// 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing						// 单元测试（unit tests）
 ( ) E2E Testing 						// e2e（end to end） 测试

5、选择vue2.x版本

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x

6、输入：Y

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

7、选择：Sass/SCSS (with dart-sass)

Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
node-sass是自动编译实时的，dart-sass需要保存后才会生效

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

8、语法检测工具，选择ESLint + Prettier

仅具有错误预防功能的ESLint
ESLint+Airbnb配置
ESLint+标准配置
ESLint+更漂亮

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

9、全选

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features:
 (*) Lint on save
>(*) Lint and fix on commit

10、选择：In dedicated config files，在专用配置文件中

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

11、是否将此保存为将来项目的预设？（是/否）

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

12、开始创建

PS E:\dome\test> vue create test-platform


Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.15
✨  Creating project in E:\源码\test-platform.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1277 packages in 2m

10 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 196 packages in 19s

12 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test-platform.
👉  Get started with the following commands:

 $ cd test-platform
 $ npm run serve

13、启动项目

PS E:\dome\test> cd test-platform                                                                                                                                       PS E:\dome\test\test-platform> npm run serve                                                                                                                            
> test-platform@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 5633ms                                                                                                                      上午11:32:43


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.149:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

浏览器打开 http://localhost:8080
在这里插入图片描述

安装vuefity组件

vue add vuetify

启动项目，浏览器打开 http://localhost:8080
在这里插入图片描述

安装axios

npm install axios

elementUI安装

https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

只引入elementUI的Notification通知组件，在main.js
https://element.eleme.cn/#/zh-CN/component/quickstart

import { Notification } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$notify = Notification

https://element.eleme.cn/#/zh-CN/component/notification

Vue目录结构

|-- build										// 项目构建(webpack)相关代码
|	|-- build.js								// 生产环境构建代码
|	|-- check-version.js						// 检查node、npm等版本
|	|-- utils.js								// 构建工具相关
|	|-- vue-loader.conf.js						// webpack loader配置
|	|-- webpack.base.conf.js					// webpack基础配器
|	|-- webpack.dev .conf.js					// webpack开发环境配置,构建开发本地服务器
|	|-- webpack.prod.conf.js					// webpack生产环境配置
|-- config										// 项目开发环境配置
|	|-- dev.env.js								// 开发环境变量
|	|-- index.js								// 项目一些配置变量
|	|-- prod.env .js							// 生产环境变量
|-- public										// 
|	|-- index.js								// 
|-- src											// 源码目录
|	|-- api										// 
|	|-- assets									// 资产（图片等）
|	|-- components								// vue公共组件
|	|-- plugins									// 插件
|	|	|-- vuetify.js							// vuetify插件
|	|-- router									// vue的路由管理
|	|	|-- index.js							// 路由入口文件
|	|-- store									// 
|	|	|-- index.js							// 
|	|-- views									// 视图文件
|	|	|-- Home.vue							// 主页面
|	|-- App.vue									// 页面入口文件
|	|-- main.js									// 程序入口文件，加载各种公共组件
|-- .browserslistrc								// 
|-- .editorconfig								// 定义代码格式
|-- .eslintrc.js								// 
|-- .gitignore									// git上传需要忽略的文件格式
|-- babel.config.js								// 
|-- package-lock.json							// 
|-- package.json								// 项目基本信息,包依赖信息等
|-- README.md									// 项目说明
|-- vue.config.js								// 配置文件