vue+element-ui创建项目的相关指令

1、Element UI引言

官网https://element.eleme.cn/#/zh-CN

 

  1.1、官方定义

网站快速成型工具和桌面端组件库

  1.2定义

element-ui就是一个机遇vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面

  1.3由来

饿了么团队，基于vue进行开发，并且进行了开源，element-ui提供全部都是封装好的组件

2、安装vscode中创建项目

对于在vscode中开发，建议安装一下插件

 

首先，vscode本身没有新建项目的选项，所以要先创建一个空的文件夹

然后打开vscode，在vscode里面打开刚刚创建的文件夹，这样才可以创建项目。

 

打开文件夹后，选择“文件 -> 将工作区另存为...”，为工作区文件起一个名字，存储在刚才的文件夹下即可

结果工作区就建好了

 

另外，如果想改颜色主题的话，如下图

 

有各种颜色可以提供选择，本次我改成白色

 

 

3、安装node.js

3.1、什么是Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

3.2、Node.js有什么用

如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。

Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。

当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

3.3 安装

1、下载

官网：https://nodejs.org/en/

中文网：http://nodejs.cn/

LTS：长期支持版本

Current：最新版

2、安装

根据系统版本选择安装文件

建议最好默认安装在C盘

安装完之后，在命令行查看node、npm版本

 

4、npm介绍

4.1、什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

4.2、NPM工具的安装位置

我们通过npm 可以很方便地下载js库，管理前端工程。

Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

• 在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具

4.3、使用npm管理项目

4.3.1、创建文件夹npm

4.3.2、项目初始化

#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

4.3.3、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

 

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像地址：

 

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 

#查看npm配置信息
npm config list

4.3.4、npm install命令的使用

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery


#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目


#如果安装时想指定特定的版本
npm install jquery@2.1.x


#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint


#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

 

4.3.5、其它命令

 

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

5、babel介绍

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持

5.2、安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install --global babel-cli

#查看是否安装成功
babel --version

 

5.3、Babel的使用

1、初始化项目

npm init -y

2、创建文件

src/example.js

下面是一段ES6代码：

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

2、配置.babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

3、安装转码器

在项目中安装

npm install --save-dev babel-preset-es2015

4、转码

# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

6、生产脚手架项目

 

初始化项目

全部y就可以了

生成json文件

 

温馨提示，如果刚安装vscode，出现下面这种情况，用管理员身份打开vscode就可以了

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
这个错误的主要原因在于VSCode权限不足
解决方法：

 

6.2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。

安装命令：

npm install -g vue-cli

安装webpack，它是打包js的工具

安装命令：

npm install -g webpack

安装方法同上。

安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是mall

创建项目命令，输入回车:

vue init webpack mall
#我的项目名称取mall

项目名称可以根据自己的喜好来取

7、vue-cli的安装和删除

查看vue-cli2版本号列表

npm view vue-cli versions

 

vue-cli2版本的安装

//指定版本安装
npm install -g vue-cli@2.x.x
 
 
 
//安装vue-cli2最新版
npm install -g vue-cli

 

vue-cli2版本的卸载

npm uninstall -g vue-cli

获取vue-cli3.x.x 版本

npm view @vue/cli versions --json

vue-cli3.x.x 版本安装

//指定版本安装
npm install -g @vue/cli@3.9.3
 
 
//安装vue-cli3最新版
npm install -g @vue/cli

 

vue-cli3.x.x 版本卸载

npm uninstall -g @vue/cli

名称由 vue-cli 改成了 @vue/cli
安装完毕之后就可以使用 vue/vue-init/vue-list这些指令 
vue -V 可以查看版本号,用来检测是否安装成功

 

npm install //加载vue配置文件
npm run dev //运行