新建vue3项目
三种方法
一. 第一种方式
1、操作步骤:
-
创建项目目录
vue create 项目名称
-
选择配置方式
? Please pick a preset: #选择一个配置 Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features # 手动选择功能
-
选择配置内容,一般为babel,router,Linter / Formatter,vuex等,上下键控制,空格键选择
? 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
Babel:转码器,可将ES6代码转为ES5 TypeScript: 支持使用 TypeScript (JavaScript超集) Progressive Web App (PWA) Support :支持PWA(渐进式Web应用程序) Router :支持 vue-router (路由) Vuex :支持 vuex (状态管理器) CSS Pre-processors: 支持 CSS 预处理器 Linter / Formatter :支持代码风格检查和格式化 Unit Testing:支持单元测试 E2E Testing: 支持 E2E 测试(end to end)
-
选择vue版本:
? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 3.x 2.x
-
使用用history模式来创建路由(根据自身需要选择):一般不建议使用历史模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
-
选择CSS预处理器(根据自身需要选择):
-
选择ESlint(我选默认)推荐使用第一项或第三项
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
-
什么时候检测:
? 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
-
选择配置文件位置(单独保存在各自的配置文件中or放在package.json中)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files #一般选择第一项,为的是将文件分离打包 In package.json
-
保存本次配置内容:建议选择n
? Save this as a preset for future projects? (y/N)
-
选择包管理工具,这里选择 npm,也可以选择 Yarn 来管理你的项目。
? Pick the package manager to use when installing dependencies: (Use arrow keys) ? Use Yarn Use NPM
运行项目
# 方式一
npm run serve
# 方式二
yarn serve
配置记录
D:\project\java\web\flyme>vue create front
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
(*) Babel
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space
> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
(*) Babel
? Check the features needed for your project: Babel,
Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server
setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, ? Pick additional lint features: (Press <space>? Pick additional lint features: (Press <space> to select, ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint,
etc.? In dedicated config files
? Save this as a preset for future projects? n
? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn
二. 第二种方式(推荐) 详情
-
基于可视化面板创建项目,终端面板输入vue ui,待网页窗口打开选择vue项目管理
-
此后的步骤与第一种方法相类似,基于页面图形按钮的方式经行创建
第三种方式
在安装之前需要确保终端运行过npm i -g @vue/cli-init命令,然后运行 vue init webpack项目名
(1) 确定项目名,回车
(2) 项目描述,回车
(3) 确定作者信息,回车
(4) 一般情况依次如下配置,回车
(5) 创建完成,进入并运行项目
目录结构
├── .vscode 目录。
│ ├── v
│ ├── v
│ └── v
│
├── node_modules 目录 (vue 项目的文件依赖存放在这个文件夹。)
│ ├── 所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。
│ ├── v
│ └── v
│
│
├── public 目录:存放项目公共资源。如网站LOGO等。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时,public内容会直接放到dist文件夹内plugins插件资源;
│ ├── v
│ ├── v
│ └── v
│
│
├── src 目录 ?:存放 vue 项目的源代码。其下的各个文件(文件夹)分别为:
│ ├── assets 目录 ?:资源文件,存放 css,图片等资源。
│ ├── ?component? 目录 ?:组件文件夹,存放 vue 的公共组件(核心)
│ │ (注册于全局,在整个项目中通过关键词便可直接输出)。
│ │
│ ├── ??router 目录 ?:用来存放 ?index.js?,用来配置路由,定义各个页面对应的URL。
│ ├── ?store 目录 ?:组件文件夹,存放 vue 的公共组件
│ ├── ??views? 目录:放主体页面,vue 文件是可以用来充当路由 view 的。
│ ├── ?tool?:用来存放工具类 js,
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ (如api.js?,?http.js? 是对 http 方法和 api 方法的封装)。
│ ├── main.js?:是项目的入口文件,初始化 vue 实例,并引入所需要的插件。
│ ├──? app.vue:是项目的主组件,所有页面都是在该组件下进行切换的。
│ ├──
│ └── v
│
│
├── babel.config.js
├── jsconfig.json
├── package.json 存放项目的依赖配置
├── README.md
├── vue.config.js 全局配置
└──yarn.lock
node_modules文件夹,文件夹中往往会有几百个文件夹,Node项目所用到的第三方包特别多,也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。
src文件夹是核心源代码的所在目录,展开后如下所示(不同版本的vue-cli生成的目录会稍有不同,不过核心都是一样的),正常开发的时候一般只修改? src? 文件夹下的文件。
dist —— 项目构建打包后的默认输出目录。
index.html 与项目根目录,在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!