1.linux下载及安装
1.1 下载:
官网下载:http://nodejs.cn/download
下载相应的版本,我用的是linux Centos 所以下载Linux。
下载后用ftp的put上传到linux。
注:安装时用root,避免了权限的问题
[root@centos_master Vue]#tar -xvf node-v10.15.3-linux-x64.tar.xz
[root@centos_master Vue]# ls
node-v10.15.3-linux-x64 node-v10.15.3-linux-x64.tar.xz
[root@centos_master Vue]
1.2解压之后做link
进入到node-v10.15.3-linux-x64/bin目录下
[root@centos_master bin]# ls
node npm npx
[root@centos_master bin]# ln -s /home/centos/software/Vue/node-v10.15.3-linux-x64/bin/node /usr/local/bin/node
[root@centos_master bin]# ln -s /home/centos/software/Vue/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/npm
测试安装是否成功
[root@centos_master bin]# node -v
v10.15.3
[root@centos_master bin]# npm -v
6.4.1
[root@centos_master bin]#
1.3 安装 cnpm
还是在node-v10.15.3-linux-x64/bin目录下,安装完成后多了cnpm
[root@centos_master bin]# npm install -g cnpm --registry=https://registry.npm.taobao.org
[root@centos_master bin]# ls
cnpm node npm npx
[root@centos_master bin]#
同样建立连接:
[root@centos_master bin]# ln -s /home/centos/software/Vue/node-v10.15.3-linux-x64/bin/cnpm /usr/local/bin/cnpm
1.4 安装vue-cli
还是在node-v10.15.3-linux-x64/bin目录下
[root@centos_master bin]# cnpm install -g vue-cli
安装完成后同样要建立软链接,否则会报No command ‘vue’ found的错误
[root@centos_master bin]# ln -s /home/centos/software/Vue/node-v10.15.3-linux-x64/bin/vue /usr/local/bin/vue
1.5 使用vue-cli创建项目
在Vue/node-v10.15.3-linux-x64的同级目录下建立projects文件夹,用来存放项目
[root@centos_master Vue] mkdie projects
[root@centos_master Vue]# ls
node-v10.15.3-linux-x64 projects
[root@centos_master projects]# vue init webpack firstproject
下载完成后执行下列命令可运行项目查看效果:
[root@centos_master projects]# cd firstproject
[root@centos_master firstproject]#cnpm install
[root@centos_master firstproject]#cnpm run dev
2.windows下载及安装
2.1 下载:
官网下载:http://nodejs.cn/download
下载后解压得到node-v10.15.3-win-x64文件夹
2.2 配置环境变量
复制下刚刚解压完的路径:D:\SOFTWARE\Vue_nodes\node-v10.15.3-win-x64
配置环境变量:
2.3 测试安装是否成功
进入cmd,用 node -v 和npm -v进行测试
2.3 安装cnpm
cmd下进入安装目录D:\SOFTWARE\Vue_nodes\node-v10.15.3-win-x64下下载安装cnpm并且使用淘宝的服务器做为的包源 。
输入命令:npm install –g cnpm --registry=https://registry.npm.taobao.org
完成后输入cnpm –v可查看到相关信息。
2.3 安装cnpm
安装webpack(js应用程序的静态模块打包器(module bundler))
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
Vue的组件是.vue或.wxml等文件,无法被浏览器解析,需要被翻译和打包为.js文件
输入cnpm install webpack –g
安装 。
2.4 安装vue-cli(用来生成vue模版的工具)
vue-cli是脚手架,就是用配置好的模版快速搭起一个项目来,省去配置webpack的基本内容。通过vue init 模版名 项目名,然后再有几个简单设置就建起项目了。
输入:cnpm install vue-cli –g
安装
2.5 新建一个Vue项目
-
在安装目录的同级目录下,创建projects目录用来存放vue项目
cdm下进入projects文件目录,运行vue init webpack firstVue
按回车直到创建完,完成后,projects目录下会多一个firstVue文件夹. -
cd 到 firstVue目录,输入
cnpm install
下载安装项目的依赖(注意不是用的npm,而是cnpm,这样快些
),完成后可在目录中看到所有有依赖,如下图
-
输入cnpm run dev运行项目
之后访问http://localhost:8080
页面对应的vue文件在项目firstVue\src\components\ 下
5.安装VScode
前面几步已经在linux中搭建好了vue的基本的开发环境,并创建了一个叫firstproject的vue项目,但正式开发通常会使用到开发工具,这里我使用的是vscode,下面是在window 本地安装VScode
官网下载:
https://code.visualstudio.com/docs/setup/windows
5.1 安装vetur,eslint插件
vetur插件,是vue语法的高亮插件。
eslint插件,是智能错误检测插件。
打开 file—Preferences—Settings,打开Edit in settings.json
新增一下内容:
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html” } “eslint.validate”: [
“javascript”,
“javascriptreact”,
“html”,
“vue” ], “eslint.options”: {
“plugins”: [“html”] }
2 用VS code开发vue项目
从github拉取项目:https://github.com/epicmaxco/vuestic-admin
Reference:
https://blog.csdn.net/junshangshui/article/details/80376489