vue

Vue

1.vue-cli的下载

依赖git环境和node.js环境。
启动windows的cmd，输入npm install vue-cli -g （其中-g表示全局安装）

2.创建vue项目

创建一个基于 webpack 模板的 vue 应用程序：
如何想要创建vue项目的文件目录 ，vue init webpack myvue
这里的 myvue 是项目名称，可以根据自己的需求起名

说明

Project name：项目名称，默认 回车 即可
Project description：项目描述，默认 回车 即可
Author：项目作者，默认 回车 即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行

3.初始化并运行

cd myvue 切换到项目文件夹下
npm install 安装npm软件管理工具
npm run dev 运行这个vue项目

vue-router

vue-router的安装

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev 其中的–save-dev表示依赖到开发环境中

webpack

1.介绍

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
概述

WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装

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

配置

创建 webpack.config.js 配置文件

entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
output：输出，指定 WebPack 把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports = {
entry: “”,
output: {
path: “”,
filename: “”
},
module: {
loaders: [
{test: /.js$/, loader: “”}
]
},
plugins: {},
resolve: {},
watch: true
}

执行

直接运行 webpack 命令打包

vue工程化创建总结

我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
1.初始化
使用 webpack 打包工具初始化一个名为 hello-vue 的工程
vue init webpack hello-vue
2.安装插件
我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
进入工程目录
cd hello-vue
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -S
#安装 SASS 加载器
npm install sass-loader node-sass --save-dev
#安装axios网络服务
npm install axios --save-dev
#安装vuex
npm install vuex --save --registry=https://registry.npm.taobao.org
修改入口函数:
import Vuex from ‘vuex’
Vue.use(Vuex);

3.安装vue需要的模块
npm install
4.启动
npm run dev