一、安装node.js
1、下载地址:https://nodejs.org/en/download/ (Latest LTS Version: 12.18.2 (includes npm 6.14.5))
我下载的是node-v12.18.2-linux-x64.tar.xz
2、解压到安装目录nodejs-v12.18.2:
tar -xf node-v12.18.2-linux-x64.tar.xz -C /root/视频/nodejs-v12.18.2/
3、查看版本:
[260190@w26-260190 ~]$ cd 视频/nodejs-v12.18.2/
[260190@w26-260190 nodejs-v12.18.2]$ ./bin/node -v
v12.18.2
4、添加环境变量,设为全局
之后安装的cnpm、vue_cli 都在bin目录下,可直接调用
# 将安装目录添加到.bashrc文件中
export PATH="/home/260190/视频/nodejs-v12.18.2/bin:$PATH"
5、检验是否设为全局
[260190@w26-260190 ~]$ node -v
v12.18.2
[260190@w26-260190 ~]$ npm -v
6.14.5
二、安装cnpm(淘宝对npm的镜像服务器)
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org
三、安装vue_cli
安装命令为:cnpm install -g vue-cli
安装完成:
[260190@w26-260190 pdf_empty]$ vue
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
[260190@w26-260190 pdf_empty]$ vue -V
2.9.6
四、新建Vue项目初始化
1、vue init webpack vue-demo
按提示操作
[260190@w26-260190 vue-demo]$ vue init webpack vue-demo
? Project name vue-demo ———项目名称,默认第三个参数,也可自己设置
? Project description A Vue.js project ————项目描述,默认即可
? Author 海角边的七号 <1415868662@qq.com> ————作者,默认即可
? Vue build standalone
? Install vue-router? Yes ————Y 安装vue-router组件
? Use ESLint to lint your code? No ————N 安装ESLint组件,对代码格式要求高,不安装
? Set up unit tests Yes ————Y/N 单元测试
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No ————Y/N e2e测试
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
vue-cli · Generated "vue-demo".
# Installing project dependencies ...
# ========================
2、进入目录,安装依赖
cd vue-demo
npm install 或者 cnpm install
3、进入目录,运行,即可在浏览器中访问 http:\\localhost:8080
To get started:
cd vue-demo
npm run dev
4、生成静态文件dist
cd vue-demo
npm run build
附:
用npm安装http-server测试你写的网页的效果
npm install -g http-server
将你的网页放在当前的目录下
然后命令行输入http-server,然后再浏览器上就可以访问了