node.js以及Vue的脚手架安装过程

一、安装node.js

1)实际的工作项目都是模块化项目,模块化的项目需要node.js环境。因此在开始项目之前需要先安装node.js.

2)安装node.js需要操作DOS窗口(终端,命令行,小黑窗)。

3)DOS窗口打开方式:win键+R。然后输入cmd确定。

node.js以及Vue的脚手架安装过程_第1张图片

node.js以及Vue的脚手架安装过程_第2张图片

二、常见DOS命令:

1)dir:用于列出当前文件夹下的所有文件及文件目录

2)cd: 进入当前文件夹下的某个目录

3)cd.. :回退当上一级目录

4)ctrl+c:取消操作.

5)方向键向上:复制上一条命令。

6)回车:确定命令输入

2.怎样快速进入某个文件夹的dos位置?

1):双击进入目标文件夹,在文件地址栏直接输入cmd回车

2):双击进入目标文件夹,shift+右键,选择在此处打开xxxx

1.安装nvm

因为node.js的版本特别多,而且有些版本有问题,不是越高版本越好,同时不同的操作系统适合的node.js版本也不一样,因此根据自身的情况,选择正确的版本非常重要。

目前node的最新版本是16.最稳定的是14版本。

win7的用户,不能安装14的node版本,只能安装更低级 版本,例如12版本和8版本。

14版本的node只有win10的用户可以安装。

不管你是win7还是win10用户,都不应该安装13的版本。因为13版本的问题特别多。

为了方便node的版本安装,可以先安装一个node版本管理工具,nvm。

下载地址:https://github.com/coreybutler/nvm-windows/releases

下载nvm-setup.zip压缩包,解压后运行解压的nvm-setup.exe文件,选择默认安装。

安装完成后,在终端中可以运行nvm的相关命令。

nvm off                     //禁用node.js版本管理(不卸载任何东西)
nvm on                      //启用node.js版本管理
nvm install        //安装node.js的命名 version是版本号 例如:nvm install 8.12.0
nvm uninstall      //卸载node.js是的命令,卸载指定版本的nodejs,当安装失败时卸载使用
nvm list                    //显示所有安装的node.js版本
nvm list available          //显示可以安装的所有node.js的版本
nvm use            //切换到使用指定的nodejs版本

这边选择一个合适的node版本,这里以14.15.2的版本安装为例:

nvm install 14.15.2

node集成了npm的安装,安装完成后,运行版本检查:

node -v
npm -v

2.指定镜像

npm 的默认服务器在国外,运行下面命令查看服务器地址:

npm config get registry

可以把npm的镜像服务器地址指向淘宝镜像:

npm config set registry https://registry.npm.taobao.org

同时,还可以安装一个cnpm指令来代替npm指令下载插件源文件,运行命令安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置cnpm的镜像:后续可以通过cnpm来代替npm的下载指令。

cnpm config set registry https://registry.npm.taobao.org

三、安装vue-cil

vue脚手架也分版本。早期的是vue-cli2,现在用的是vue-cli4。不同的版本安装方式还不一样。

1:先卸载脚手架vue-cli2(如果有)输入命令:

npm uninstall vue-cli -g

2:装脚手架vue-cli3+,输入命令

npm install -g @vue/cli

3:创建项目文件夹

进入希望创建项目文件夹的文件夹,输入以下命令创建一个名为vuetext的项目:

vue create vuetext

也可以通过图形化界面来创建项目。运行命令

vue ui

安装过程,可以手动选中需要安装的工具或者源文件。

安装完成后,进入VueText文件夹,输入命令运行项目

npm run serve

最后通过提示用浏览器打开项目地址查看项目页面。

四、项目目录

1:node-modules:依赖文件件,内部存放所有项目依赖的源文件和工具。

下载命令:cnpm i 或者npm i

2:package.json: 项目依赖文件的一个清单,项目的运行命令等。(很重要)

 // 项目名
  "name": "homework", 
  // 版本
  "version": "0.1.0",
  // 项目是否私有
  "private": true,
  // 脚本 (项目运行命令)
  // 不是所有的项目运行都是通过serve运行。可以修改的
  // 运行项目之前,需要先查看package.json中的scripts项.
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  // 项目的源文件列表.后面的数字指的是源文件版本.
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  // 工具依赖.
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },

3:package-lock.json node-modules文件夹内所有文件的列表清单。

它决定了node-modules内部都有什么文件。cnpm i 时就是按照该清单下载依赖。

4:.gitignore git仓库提交时忽略的文件清单。

5:vue.config.js 项目的自定义配置

module.exports = {
    devServer: {
        port: 10000
    }
}

五、项目的依赖安装

下载指定的依赖文件:

语法:

npm install --save 依赖文件名@指定版本

--save:意即把安装好的依赖文件保存到package.json中

--dev: 把安装好的依赖文件作为工具依赖保存。

也有简写的方式:

install 的简写是 i

--save 的简写是 -S

--dev 的简写是 -D

npm install axios --save 可以简写成 npm i axios -S

还可以按需指定版本:

npm i axios 下载最新的版本

npm i [email protected] 下载指定版本

npm i axios@3 下载3开头的最新版本

六、ESlint

ESlint是一个语法检查工具。有很多预设规则,例如:airbnb,standard。

装了这个工具,需要书写代码的风格完全按照预设的规则进行,否则项目无法运行。对于强迫症的人来说这个检查工具无疑是最香的,但对于平时代码书写不规范的可能有些难受了。可以帮助我们提高代码的书写质量。

1:23  error  Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

1 => 出错的行数
error => 出错的类型
Expected linebreaks to be 'LF' but found 'CRLF' => 出错的文本
linebreak-style => 违反的规则名

在esLint的规则中进行设置.每个规则可以设置3种值.分别是off,warn和error.或者0,1,2
rules:{
    "linebreak-style":"off"
}
Missing semicolon 
//缺失分号

Missing file extension "vue" for "./App"  
//缺失了一个文件后缀

Do not use 'new' for side effects  
//只new不实例化

'vm' is never reassigned. Use 'const' instead 
// vm是引用类型,从来没有被重新赋值,应该用const声明。

'vm' is assigned a value but never used  
//vm声明了但是又没有使用

Missing space before value for key 'el' 
// el的属性值前面应该有空格

Expected indentation of 2 spaces but found 4
// 缩进应该是2个空格而不是4个。

Expected parentheses around arrow function argument 
// 箭头函数的形参,不应该省略括号。

Missing trailing comma
// 对象最后一个属性的没有逗号

A space is required after '{'
// { 的后面应该有个空格

A space is required before '}'  
// } 的前面应该有个空格

Newline required at end of file but not found
// 文件的默认应该有一行空的文本

 A space is required after ','
// ,后面应该有空格。

Missing space before opening brace
// 左大括号 { 的前面少了空格

Operator '+' must be spaced
// 操作符的前后应该有空格

建议的写代码规范:

1:操作符前后有空格。

2:每行结尾加分号。局部作用域的{}后面不加。

3:纯对象{}中左右应该有空格。

4:函数形参的逗号和数组元素之间的逗号后面有空格。

5:函数声明的 { 前面应该有空格。

6:引用类型应该有const声明。

7:对象的最后一个属性后面应该有,

可以在vue.config.js中关掉ESlint

module.exports = {
	lintOnSave: false
}

七、UI框架

Ui框架 => ui组件库 => 快速生成拥有漂亮样式的组件 => 提升开发效率.

Vue的常见ui组件库:

PC端:Element-ui,iView

移动端:vant-ui,mintUI,Vux

ui组件库的使用,从来不是开发的难点,直接参照ui组件库的API直接写。

1:如何安装? 直接在官网上查看安装命令。

2:如何引入组件?直接在官网上查看引入方式。(一般引入的代码在main.js中放置)

2.1:全局引入 (所有组件全部导入)

2.2:按需引入 (用哪个组件就导入哪个组件)

3:如何使用引入组件?

在官网上找到对应的组件,直接拷贝。

你可能感兴趣的:(Vue.js,web前端,node.js,vue.js)