新建VUE项目

林沧渊

已于 2024-04-12 17:56:18 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue

于 2022-08-15 10:30:37 首次发布

本文链接：https://blog.youkuaiyun.com/SHENLINHAI/article/details/126340594

Vue: 更先进的理念 -- 工程化, 自动化

国人在 2014年首次推出的框架, 目前占据王者地位

vue目前最新版本是 3

vue1: 已淘汰

vue2: 目前主流版本

vue3: 以后的发展趋势

下面来一起下载创建vue框架项目

生成脚手架:npm install -g @vue/cli (镜像为淘宝镜npm i -g@vue/cli 像)

在一个文件夹里打开cmd , 输入npm i -g@vue/cli 生成脚手架

C:\Users\Administrator\Desktop\新建文件夹>npm i -g@vue/cli
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\新建文件夹\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\新建文件夹\package.json'
npm WARN 新建文件夹 No description
npm WARN 新建文件夹 No repository field.
npm WARN 新建文件夹 No README data
npm WARN 新建文件夹 No license field.

up to date in 0.957s
found 0 vulnerabilities

生成项目包:vue create 包名称 (自定义,如:xuezi-pro)

C:\Users\Administrator\Desktop\新建文件夹>vue create vuedemo

选择需要的框架版本

C:\Users\Administrator\Desktop\新建文件夹>vue create vuedemo


Vue CLI v5.0.7
┌─────────────────────────────────────────┐
│                                         │
│   New version available 5.0.7 → 5.0.8   │
│                                         │
└─────────────────────────────────────────┘

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

这里的选项有vue3、vue2、和自定义（自选功能），这里我们使用自选功能，满足使用需求（这里是我通常使用的功能）
【空格】进行选择取消，【回车】运行下一步

? 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                       //允许我们使用ES6模块化语法，默认选中
 ( ) TypeScript                  //js的升级版本，增加了强定义类型
 ( ) Progressive Web App (PWA) Support    //如果开发项目是移动端，请勾选
 (*) Router                      //vue中的路由组件，非常好用
 (*) Vuex                        //vue中的状态管理组件
>(*) CSS Pre-processors          //css 预处理，如果使用到了SCSS和less，请勾选
 ( ) Linter / Formatter          //代码格式语法检测，
 ( ) Unit Testing                //Unit Testing测试工具
 ( ) E2E Testing                 //E2E Testing测试工具

选择完成后，【回车】下一步，2.x 是VUE2主流vue框架，3.x是vue3最新vue框架(自行选择，本人使用vue2)

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

后面就是一路回车加确认，【即可完成】

用开发软件打开项目包，或者打开项目包cmd文件夹，输入npm run serve运行项目
（这里需要node.js版本在12.0.0及以上，否则运行会报错）

C:\Users\Administrator\Desktop\新建文件夹\vuedemo>npm run serve

> vuedemo@0.1.0 serve C:\Users\Administrator\Desktop\新建文件夹\vuedemo
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 2655ms                                                                10:23:08 ├F10: AM┤

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

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

浏览器访问:http://localhost:8080/ 即可看到项目页面

（如有帮助，点赞加关注，追代码不迷路）

Vue-cli工程中每个文件夹和文件的用处

dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
node_modules：存放npm命令下载的开发环境和生产环境的依赖包
public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
src文件夹：存放项目源码及需要引用的资源文件
src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
src-common文件夹：stylus的混合文件.styl，不要写到public也可以
src-components文件夹：存放vue开发中抽离的一些公共组件
src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
src-pages文件夹：涉及到路由的组件
src-router文件夹:vue-router，路由器及路由的配置
src-store文件夹：存放 vue中的状态数据，用vuex集中管理
App.vue文件：使用标签渲染整个工程的.vue组件
main.js文件：vue-cli工程的入口文件
package.json文件：用于 node_modules资源部和启动、打包项目的 npm 命令管理
build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅偶尔使用到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库
config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等