从零配置VUE

本文借鉴于百度搜索 一个萌新自学的苦难之路,各种百度下来的解决办法,很多百度的文章找不见了,有侵权的可以联系我删除
跳转的后续再补充

安装node.js

	1. Node.js 官方网站下载：
	2. 傻瓜式安装..一路next
	3. node –v查看版本
	4. npm –v查看npm版本

跳转连接::::::::::::::::::::https://nodejs.org/en/

1. 配置npm在安装全局模块时的路径和缓存cache的路径.

在想要安装目录下新建两个文件夹 node_global和node_cache
然后在cmd命令下执行如下两个命令：

不要忘记引号

npm config set prefix “盘符:\路径\node_global”

npm config set cache “盘符:\路径\node_cache”

2. 执行成功

	然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为

名称 : “NODE_PATH”
路径 : “盘符:\路径\node_modules”

3. 在cmd命令下执行

npm install webpack -g

	然后安装成功后可以看到自定义的两个文件夹已生效。

4. 查看webpack的版本号

npm webpack -v

安装vue –cli

1. 如有老版本vue先进行卸载,卸载命令如下:

npm uninstall -g vue-cli

2. 安装最新版的vue,命令如下:

npm install -g @vue/cli

3. 查看安装的版本 注意-V是大写的

vue –V

创建项目

1. 创建命令如下:

vue create 包名

文件名 不支持驼峰 (含大写字母)

2. 是否应用淘宝镜像

(通过↑ ↓ 移动，再按 Ente确定)

3. 选择配置

	default 是使用默认配置

	Manually select features 是自定义配置

一般选选择自定义配置

4. 选择你需要的配置项

	按 空格 是选中，按 a 是全选，按 i 是反选。

每个选项的解释:

? 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） 测试

5. 选择是否使用history router

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

	1)我这里建议选n。这样打包出来丢到服务器上可以直接使用了。
	2)	选yes的话需要服务器那边再进行设置。

6. 选择css预处理器

	css 的预处理器选择 Sass/SCSS(with dart-sass) 。
	node-sass是自动实时编译
	dart-sass 保存后才生效
	选择Sass/Scss(with dart-sass)
	sass 官方主力推荐 dart-sass 最新的特性都会在这进行实现

7. 选择Eslint代码验证规则

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用居多

8. 选择什么时候进行代码规则检测

然后选择什么时候进行代码校验:
Lint on save 保存就检查
Lint and fix on commit   fix 或者 commit 的时候检查，建议第一个

选项的含义:

( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查

9. 选择如何存放配置

1)	下面是如何存放配置
In dedicated config files 存放到独立文件中，
In package.json 存放到 package.json 中

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

如果是选择 独立文件放置，项目会有单独如下图所示的几件文件。

10. 是否保存当前配置

最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

11. 成功搭建项目

输入启动命令

npm run serve

配置项目

1. 创建vue.config.js

直接在根目录下新建文件vue.config.js

2. 配置启动的端口以及是否打开页面

配置一些常用的属性:

/* eslint-disable prettier/prettier */
module.exports = {
   
    devServer : {
   
        open :false, //是否启动打开页面
        port :8081, //端口号
    },
}

3. 配置生产测试等环境

根据自己的项目进行配置在package.json配置

"scripts": {
   
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",           //测试
    "build"