Vue安装及使用

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项目

1. 在安装目录的同级目录下，创建projects目录用来存放vue项目
   
   cdm下进入projects文件目录，运行vue init webpack firstVue
   按回车直到创建完，完成后，projects目录下会多一个firstVue文件夹.

2. cd 到 firstVue目录，输入cnpm install下载安装项目的依赖(注意不是用的npm，而是cnpm，这样快些)，完成后可在目录中看到所有有依赖，如下图
   

3. 输入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.youkuaiyun.com/junshangshui/article/details/80376489