Vue2.0快速入门

基本配置

首先在官网下载Nodejs，下载完成后查看控制台查看node版本

node -v

查看npm版本

npm -v

下载cnpm淘宝镜像

npm install cnpm -g

安装vue-cli

cnpm install vue-cli -g

安装后查看

vue list

创建webpack项目

在想要创建的文件目录下进入控制台，运行以下命令

vue init webpack 项目名称

一路选择no，install失败按提示fix修复

cd 项目名称
npm install
npm run dev

若出现以下出现错误

npm ERR! ERESOLVE unable to resolve dependency tree

需要使用以下指令（npm不行尝试使用cnpm代替）

npm i --legacy-peer-deps
npm i eslint-plugin-vue

成功运行页面如下

webpack打包

接下来安装webpack ES6->ES5

npm install webpack -g
npm install webpack-cli -g

构建完成后

举例：

新建modules文件夹新建以下文件

hello.js（暴露方法）

//暴露方法
exports.sayHi1 = function () {document.write("<h1>tpaer0</h1>")
};
exports.sayHi2 = function () {document.write("<h1>tpaer1</h1>")
};
exports.sayHi3 = function () {document.write("<h1>tpaer2</h1>")
};
exports.sayHi4 = function () {document.write("<h1>tpaer3</h1>")
};

min.js（接收暴露的方法）

//接收暴露的方法
var hello = require("./hello");
hello.sayHi1();
hello.sayHi2();
hello.sayHi3();
hello.sayHi4();

在项目下面新建以下文件

webpack.config.js(打包min.js新文件名为bundle.js)

module.exports = {entry: './modules/min.js',output: {filename: "./js/bundle.js"}
};

执行打包操作

webpack
webpack --watch //热启动

若失败可能需要脚本权限需要以管理员权限执行并运行如下脚本选择y

set-ExecutionPolicy RemoteSigned

成功打包

Router路由

在当前项目下安装Router

--save-dev保存在node_modules下相当于java中library的jar包

若安装失败使用cnpm进行安装

npm install vue-router --save-dev

在相应js中进行引用

import VueRouter from 'vue-router'//显示声明使用VueRouter
Vue.use(VueRouter);

可能有版本不兼容问题导致引入失败可以降低router版本

cnpm install vue-router@3.1.3 --save-dev

Element-UI

正常创建webpack项目，使用如下指令

安装element-ui

npm i element-ui -S

安装SASS加载器2个

cnpm install sass-loader node-sass --save-dev

若启动失败则可能是sass版本过高的问题，需要降低版本至4.0.0

在package.json中找到sass-loader修改版本，并重新npm install

Axios

安装axios使用如下命令

npm install --save axios vue-axios

并在main.js引入以下

import axios from 'axios'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios);

NPM命令解释

npm install moduleName:安装模块到项目目录下

npm install -g moduleName:-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置

npm install -save moduleName:-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

npm install --save-dev moduleName:--save-dev的意思是将该模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写