使用vue2.0从零开始搭建项目

    工作了这么长时间，尝试把从0开始搭建vue项目，并且把工作中遇到的一些问题和解决方法全部写下来     

1.搭建项目前的准备

安装node.js（什么是node.js?），直接在官网上下载即可，现在node.js都包括了npm(什么是npm?)，不用在单独下载，而且最新版的环境变量也不用自己配置了 网址:  nodejs.org/en/   下载成功后使用命令 node -v 和 npm -v看版本号

    安装淘宝镜像

npm install -g cnpm --registry= registry.npm.taobao.org // 注册淘宝镜像 npm替换成cnpm使用即可 

    安装webpack (什么是webpack？)

npm/cnpm install webpack -g

有些依赖用淘宝镜像下载会快一些

2.使用脚手架搭建项目

npm install -g vue-cli  // 全局安装脚手架
vue init webpack 项目名  // 生成项目
cd 项目名  // 进入项目
npm/cnpm install  // 下载项目依赖     开发依赖和项目依赖的区别
npm run dev // 运行项目
npm run build // 打包项目        项目结构仔细分析
复制代码

3.如何引用插件

引用element-ui

下载所需的依赖 

cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D复制代码

下载element-ui

npm install element-ui --save复制代码

修改webpack.base.conf.js 的配置

 {
        test: /\\\\\\\\.css$/,
        loader: "style!css"
    },
    {
        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
        loader: "file"
    } 复制代码

4.在最外层的main.js 引用

import Elementui from 'element-ui'     // 引入element-uiimport'element-ui/lib/theme-default/index.css'  // 引入cssVue.use(ElementUI)  // 挂载elementUI复制代码

5.在组件内直接调用

其余插件也和这个引用差不多

比较常用的插件: 

• 轮播   swiper    vue-awesome-swiper    
• table  elementui里面有表格，如果满足不了需求可以使用 vue table
• 图表  echart    以后还有再补充

6.项目中必须要有的

• ajax  用的是官方提供的
• vuex 官方提供的状态管理工具

7.如何使用自己封装的方法

在外面公共文件夹里面建立until.js 文件里面写好自己封装的方法

在最外面的main.js中引入，

import utils from './utils'    // 在utils 里面把所有方法return出来  复制代码

扩展到vue的原型上面去

Vue.prototype = Object.assign(Vue.prototype, utils())复制代码