目录
01 环境安装02 Node.js的安装和配置2.1 安装Node.js2.2 测试nodejs是否安装成功2.3 配置Node.js2.4 基于 Node.js 安装cnpm(淘宝镜像) 03 Vue的安装3.1 使用命令安装Vue3.2 安装vue命令行工具(脚手架):vue-cli 04 创建Vue项目4.1 写在前面4.2 使用vue create的方式创建Vue项目(推荐)4.3 使用vue init 的方式创建Vue项目4.4 使用VUE UI的方式创建VUE项目 05 Vue项目中package.json简介5.1 package.json—scripts5.2 package.json—dependencies5.3 package.json—devDependencies 06 拓展 016.1 安装全局依赖6.2 如何在项目中引入组件或者依赖包6.2.1 引入组件 (全局引入)6.2.2 引入依赖包(全局引入) 07 拓展02如何将node升级到指定版本如何将npm升级到指定版本如何将vue升级到指定版本 08 注意事项09 写在最后01 环境安装
我们首先要在电脑上安装Node.js和Vue
02 Node.js的安装和配置
2.1 安装Node.js
官网:/en/download/
通过上面的链接下载Node.js
无脑安装:除了需要修改安装路径,其他都是下一步,环境变量也会自动配置
2.2 测试nodejs是否安装成功
cmd下输入:node -v
,查看是否能够正常打印出版本号cmd下输入:npm -v
,查看是否能够正常打印出版本号注:安装node之后会自带npm
2.3 配置Node.js
Node.js的设置,我们要配置两个地方:
通过npm安装的包的存储位置(路径):配置文件中的nodejs prefix
node缓存位置(路径):配置文件中的cache
(缓存)路径
nodejs安装好之后,通过npm下载全局模块默认安装到:C:\Users\username\AppData\下的Roaming\npm
下,一般我们不想把东西存到C盘里面的,我们进行如下设置,把通过npm安装的文件依赖全部都放到我们自己想放的地方,便于管理
。
1、在nodejs安装路径下,新建node_global和node_cache两个文件夹
2、设置node_global和node_cache
设置缓存文件夹
npm config set cache "E:\NodeJs\node_cache"
设置通过npm安装的包的存放路径
npm config set prefix "E:\NodeJs\node_global"
注意:设置成功后,之后用命令npm install XXX -g
(全局安装),安装以后模块就在E:\NodeJs\node_global
里
2.4 基于 Node.js 安装cnpm(淘宝镜像)
安装NodeJs淘宝镜像加速器(cnpm)的原因:
直接使用npm下载东西可能会下载不下来,安装cnpm之后,使用cnpm下载速度会快一些
在cmd里执行下面的命令:
# -g 就是全局安装# 注意:使用管理员权限启动cmdnpm install -g cnpm --registry=https://registry.# 此语句和上面的语句执行结果是一样的npm install -g cnpm 注意:虽然安装了cnpm,但是尽量少用,能使npm就不用cnpm,因为使用cnpm安装的包可能会打包失败
由于我们上面设置了全局安装的位置,所以这个cnpm安装的的位置不在默认位置
默认位置:(为隐藏目录):C:\Users\AISMALL\AppData\Roaming\npm当前安装位置:E:\NodeJs\node_global
测试cnmp是否安装成功
cmd下输入:cnpm -v
注意:如果报不是内部或者外部命令,需要给cnpm配置一下环境变量
,如果不想配置也可以直接在控制台切换到cnmp的目录下使用cnmp安装文件依赖
03 Vue的安装
说明:在安装了Node.js之后,安装Vue就比较简单了,
3.1 使用命令安装Vue
安装命令:npm install vue -g
当命令执行完,就可以在之前的配置的目录下面找到安装的Vue文件
3.2 安装vue命令行工具(脚手架):vue-cli
什么是Vue脚手架?
Vue脚手架就是Vue提供的一个标准化的开发工具(开发平台)。脚手架可以将我们写的.vue
文件翻译成浏览器能识别的文件。官方网站:/zh/
安装命令:
使用这个命令安装的是低于vue3.x版本
的命令行工具
npm install vue-cli -g
使用这个命令安装的是最新版本
的命令行工具,版本高于3.0
npm install @vue/cli -g
安装指定版本的命令行工具(x.x.x为版本号
)
npm install @vue/cli@x.x.x -g
由于vue-cli 3.x以上版本
无法使用init指令,如果想使用init指令初始化项目,需要安装另外安装
npm install -g @vue/cli-init
查看安装版本命令:vue -V
卸载命令:
卸载低于vue 3.x版本
的命令
npm uninstall vue-cli -g
卸载vue3.x以上版本的命令
npm uninstall @vue/cli -g
测试安装成功:vue list
注意:
可以通过这个命令查看配置:npm config ls
Vue命令行工具(脚手架),向下兼容,用最新的就可以了。
04 创建Vue项目
4.1 写在前面
我们在前面铺垫了那多就是为了现在,使用命令创建
一个Vue项目,并运行起来,我们开始吧。
4.2 使用vue create的方式创建Vue项目(推荐)
第一步:在DOS中切换到保存我们项目
的文件夹
第二步:在这个文件下使用命令初始化我们的项目
vue create 项目名
命令执行后,会有几个选择项,此处说明一下什么意思:
? Your connection to the default npm registry seems to be slow.Use for faster installation? (Y/n)
上面的意思是:使用默认的npm下载的比较慢,可以使用镜像源下载,此处选择Y
,下载速度会快一些。
Vue CLI v5.0.4? Please pick a preset: (Use arrow keys)> Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features
上面的意思是:选择使用什么版本的Vue创建项目
运行结果:
第三步:运行项目
切换目录:cd 项目名
运行项目:npm run serve
第四步:访问项目
项目链接:http://localhost:8080/
4.3 使用vue init 的方式创建Vue项目
第一步:在DOS中切换到保存我们项目
的文件夹
第二步:在这个文件下使用命令初始化我们的项目
vue init webpack 项目名
注意:命令中的webpack是创建使用webpack管理的vue项目
命令执行后,会有几个选择项,此处说明一下什么意思:
Project name
:项目名称,填写或默认就点回车。Project description
:项目描述,填写或默认就点回车。Author
:项目作者,填写或默认就点回车。选择Runtime + Compiler: recommended for most users
。install vue-router
:是否安装路由插件,选yes,也可以选no ,后期手动添加。Use ESLint to lint your code
:是否用ESLint做代码检查,选yes,也可以选择no 不安装,后期手动添加。选择Standard (/standard/standard)
。Set up unit tests
:单元测试相关,选yes,也可以选no ,后期手动添加。Setup e2e tests with Nightwatch
:单元测试相关,选yes,也可以选no ,后期手动添加。Should we run npm install for you after the project has been created? (recommended) npm
:这句话的意思是,创建完成后直接使用npm安装相关依赖
,此处最好不要选yes
,后期手动添加,我此处选择no
,因为直接使用npm安装依赖老是卡死,后面使用cnpm install 命令进行安装,如果选了YES
下载依赖的时候被卡死也不用紧张,直接Ctrl+C
取消即可。
运行结果:
第三步:安装工程依赖模块
由于上面的最后一步我选择的No,I will handle that myself
,所以需要手动安装一下包,或者上面选择Yes,安装报错,也可以使用cnpm install
进行补安装
。
cmd中转到工程目录下,安装该工程依赖的模块,这些模块将被安装在:你的工程目录\node_module目录
下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules。
# 切换目录cd 项目目录# 安装依赖cnpm install(推荐使用) 或者 npm install
注意:如果执行过过程中卡死,点击回车键,会继续下载,出现All packages installed
就代表成功了,也可以使用Ctrl+C
取消批处理,然后在反复执行cnpm install
直到成功。
第四步:运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。
npm run dev
或者cnpm run dev
注意:执行完之后会告诉你访问项目的路径,到此就完成了
4.4 使用VUE UI的方式创建VUE项目
由于低于3.x
版本的vue是无法使用vue ui
的,如果你想使用vue ui的话需要对vue进行升级
第一步:查看你的vue版本,如果低于3.x
就执行下面的操作(第二步和第三步
)
vue --version
第二步:卸载之前安装的VUE
npm uninstall -g vue-cli
第三步:安装使用命令安装最新版本的vue和vue脚手架
npm install -g @vue/cli
第四步:在终端使用使用命令打开ui界面
vue ui
注意:
新版本的指令是@vue/cli 而非 vue-cli
,如果使用npm install -g vue-cli
默认安装的是低于3.x版本的vue使用npm install -g @vue/cli
安装的才是最新版本的
05 Vue项目中package.json简介
这个文件对于Vue项目还是很重要
的,我们使用npm install
命令 或者cnpm install
命令安装的依赖就是在这个文件夹中指定的,我们来具体看看吧:
{"name": "demo","version": "1.0.0","private": true,"scripts": {....省略...},"dependencies": {....省略...},"devDependencies": {},"engines": {....省略...},"browserslist": [....省略...]}
name:项目名字version:版本号scripts:支持的脚本dependencies:运行时依赖的包devDependencies:开发时依赖的包engines: 声明项目需要的node或npm版本范围browserslist:表示当前项目的浏览器兼容情况
5.1 package.json—scripts
scripts配置项
:里面存放的都是支持的脚本命令
举例如下:
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"}
"serve": "vue-cli-service serve"
"脚本工具":"作用介绍(可以更改)"
运行这些命令的方式为:npm run "脚本工具"
如启动项目:npm run serve
5.2 package.json—dependencies
dependencies配置项
:里面存放的都是项目运行时
的依赖包
在给项目添加运行时依赖
的方式有两种:
第一种:使用命令安装
npm install module_name -S 等价于 npm install module_name --save
cnpm install module_name -S 等价于 cnpm install module_name --save
注意:
--save 等价于 -S // 运行依赖(发布)
依赖一般是-S
安装
插件一般是-D
安装
第二种:手动添加
第一步:在dependencies中手动添加,例如,添加axios
:
"dependencies": {"axios": "^0.18.0"}
第二步:在DOS中进入到项目文件夹执行:npm install 或者 cnpm install
即可
注意:如果想只安装dependencies
中的内容,可以使用--production 字段
npm install --production
5.3 package.json—devDependencies
devDependencies配置项
:里面存放的都是项目开发时
依赖的依赖包
在给项目添加开发时依赖
的方式有两种:
第一种:使用命令安装
npm install module_name -D 等价于 npm install module_name --save-dev
cnpm install module_name -D 等价于 cnpm install module_name --save-dev
第二种:手动添加
第一步:在devDependencies 中手动添加,添加axios
:
"devDependencies": {"axios": "^0.18.0"}
第二步:在DOS中进入到项目文件夹执行:npm install 或者 cnpm install
即可
06 拓展 01
6.1 安装全局依赖
这个前面在安装Node.js的时候已经介绍了,很简单,如下:
使用npm
进行全局安装:npm install module_name -g
使用cnpm
进行全局安装:cnpm install module_name -g
6.2 如何在项目中引入组件或者依赖包
全局引用在main.js
中.
:表示当前目录。..
:表示当前目录的上级目录@
:等价于/src
这个目录JS中的import
是js的语法, 引入组件或者包的时候使用默认导入语法import 接收名称 from '模块标识符’
6.2.1 引入组件 (全局引入)
第一步:我们要创建一个Vue组件,在src/components
目录下创建我们自己的组件(使用驼峰命名法),例如:HelloVue.vue
。第二步:在main.js
中使用import引入组件,例如:import HelloVue from './components/HelloVue.vue'
第三步:在router目录
下的index.js
文件中添加一个路由对象第四步:在App.vue文件中添加上路由占位符。注意:.vue
后缀可以不带,如下import HelloVue from './components/HelloVue
6.2.2 引入依赖包(全局引入)
第一步:先在项目的package.json中添加依赖包第二步:在main.js
中使用import引入依赖包,例如:import Vue from 'vue'
注意:package.json中所列出的依赖包都会下载到node_modules文件夹下07 拓展02
如何将node升级到指定版本
node有一个模块n,是专门用来管理node.js的版本的
1、安装n模块:
2、升级node.js到最新稳定版npm install -g n
3、安装指定版本:n stable
n v版本号
如何将npm升级到指定版本
npm升级到指定版本
比如升级到5.6.0
npm install -g npm@5.6.0
如何将vue升级到指定版本
安装最新的vue
npm install -g vue-cli —
这个命令已经废弃了在3.0以后
npm install -g @vue/cli
安装指定版本的vue
npm install -g @vue/cli@版本号
例如 :
npm install -g @vue/cli@3.11.0
卸载vue
npm uninstall -g @vue/cli
vue项目element-ui升级到某版本
1.npm uninstall element-ui 卸载掉当前版本
2.npm install element-ui@版本号 -S
注意element-ui@版本号是一项,中间没有空格
3.最后在main.js中把default修改为theme-chalk
import ‘element-ui/lib/theme-default/index.css’
修改为
import ‘element-ui/lib/theme-chalk/index.css’
08 注意事项
引入自定义组件之后,假设是Login.vue
组件,路由为/login
访问目录应该是:https://localhost:8080/login
实际上确是:https://localhost:8080/#/login
如何修改为https://localhost:8080/login
在router下的index.js文件中的添加一个组件属性mode
,如下:
export default new Router({mode:'history',routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/login',name:'Login',component:Login}]})
09 写在最后
本博客为学习的时候写的博客,仅供参考,如果有新的内容会持续更新,,,,,
如果觉得《使用Node.js+Vue—从零搭建一个Vue项目》对你有帮助,请点赞、收藏,并留下你的观点哦!