Vue项目脚手架架搭建-Vue CLI脚手架使用

最新推荐文章于 2024-09-06 22:20:29 发布

面向百度编程专家

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量289

点赞数 1

分类专栏： Vue.js 文章标签： vue vue.js node.js webpack 前端

本文链接：https://blog.csdn.net/u013410260/article/details/105902038

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、介绍

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

二、安装node.js

去node官网下载node.js并安装（http://nodejs.cn/download/）。安装完成后可以在终端执行 $ node -v查看node 是否安装成功.
　　查询npm版本号：$ npm -v
　　升级npm（选择操作）：$ npm install -g npm

C:\Users\Administrator>node -v
v12.12.0

C:\Users\Administrator>npm -v
6.11.3

三、安装cnpm

由于我们的网络问题，下载模块时会比较缓慢，所以推荐使用淘宝镜像（选择操作）。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

四、安装vue-cli

（1）卸载vue-cli2：$ npm uninstall vue-cli -g （选择操作）。
（2）执行$ npm install -g @vue/cli命令进行全局安装。
（3）检查是否安装成功终端执行$ vue -V或者$ vue --version，如果显示具体的版本号则表示安装成功。具体安装方式查看官网（https://cli.vuejs.org/zh/）。

C:\Users\Administrator>vue --version
@vue/cli 4.3.1

在这里插入图片描述

五、创建项目

进入到自己要安装项目的文件夹目录，执行 $ vue init webpack [项目名]或者$ vue create [项目名] 命令

（一）Vue-cli 2.x创建项目

（1）输入命令：$ vue init webpack my-project
（2）配置

Project name:　[项目名称]
Project description:　[项目描述]
Author:　[作者]
Vue build:　[构建模式，一般默认选择第一种]
Install vue-router?:　[是否安装引入vue-router，vue-router是路由组件]
Use ESLint to lint your code?:　[这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度]
Set up unit tests：[是否使用单元测试]
Setup e2e tests with Nightwatch：[是否要进行e2e(端到端测试)，是一个自动化测试的框架]
Should we run `npm install` for you after the project has been created? (recommended)： [包管理器]

在这里插入图片描述

（二）Vue-cli 4.x创建项目

（1）输入命令：$ vue create my-project
（2）配置
　　这里我们选择手动配置，按 ↓ 选择"Manually select features"，再按 Enter

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)　　　// 默认安装 babel，eslint
> Manually select features　　 // 手动配置

（3）选择你需要的配置项
　　通过 ↑↓ 箭头选择你要配置的项，按 spacebar 是选中，按 a 是全选，按 i 是反选，选完之后按 Enter 。具体每个配置项表示什么意思在下面会有说明。
在这里插入图片描述

Vue CLI v4.3.1
  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)
>( ) Babel  //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
 ( ) TypeScript  // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
 ( ) 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） 测试

（4）选择是否使用history router
　　上面我选择添加了 Router 所以这里会问我需不需要使用 history 模式，选择是然后进行下一步。

Vue CLI v4.3.1
Please pick a preset: Manually select features
Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

选择n，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选择yes，需要服务器那边再进行设置。

（5）选择css预处理器

  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

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

（6）选择Eslint代码验证规则
　　提供一个插件化的javascript代码检测工具，ESLint + Prettier （使用较多）

  Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

（7）选择什么时候进行代码规则检测

  Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save　　　　　　　　// 保存就检测
 ( ) Lint and fix on commit   // fix和commit时候检查

建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

（8）选择单元测试

  Pick a unit testing solution:
> Mocha + Chai
  Jest

Mocha + Chai：灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest ：安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

（9）选择如何存放配置

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

In dedicated config files： 独立文件放置
In package.json： 放package.json里

（10）是否保存当前配置

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

键入N不记录，如果键入Y需要输入保存名字

六、启动项目

（1）进入项目：cd [项目名]
（2）运行项目：npm run dev
（3）输入网址： http://localhost:8080/

七、目录结构及其对应作用

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

面向百度编程专家

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目脚手架架搭建-Vue CLI脚手架使用

目录一、介绍二、安装node.js三、安装cnpm四、安装vue-cli五、创建项目（一）Vue-cli 2.x创建项目（二）Vue-cli 4.x创建项目六、启动项目七、目录结构及其对应作用一、介绍是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。二、安装node.js去node官网下载node.js并安装(http://nodejs.cn/d...
复制链接

扫一扫

专栏目录