vue项目的创建和库的使用

使用vue创建vue项目

Node.js安装npm

Npm安装淘宝镜像cnpm

使用npm安装wekpack

使用npm安装vue-cli脚手架

 

开始创建vue项目

vue init webpack my-project

cd my-project

npm init

运行项目

npm run dev

编译项目

npm run build

 

Vue项目中使用jquery

1、使用npm安装jquery

npm install jquery --save-dev

2、在webpack配置

在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用，

var webpack = require('webpack')

然后在module.exports中添加插件配置

增加一个plugins
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "windows.jQuery": "jquery"
  })
]

 

再然后在alias: {

 webpack 使用 jQuery，如果是自行下载的
'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),

 如果使用NPM安装的jQuery
'jquery': 'jquery'

}中添加

3、在任何地方添加import $ from 'jquery'即可使用jquery

vue项目中使用bootstrap

1、npm安装bootstrap

npm install bootstrap@3.3.0 --save-dev

2、在main.js的最上面引用

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

 

vue项目中使用Elementui

Element 官方文档 http://element-cn.eleme.io/#/zh-CN/guide/design

1、安装npm i element-ui

2、完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'

Vue.use(ElementUI)