简单创建 Vue 的项目 (包括一些简单的插件)

1. 创建一个 Vue 项目

改变原有的环境变量

npm config set prefix "D:\install\nodejs\nodejs_global"
npm config set cache "D:\install\nodejs\nodejs_cache"

查看

npm list -global

npm config list

增加环境变量 NODE_PATH 内容是: D:\install\nodejs\nodejs_global

安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v

安装插件

cnpm install -g vue@next
cnpm install -g @vue/cli

查看当前源

npm config get registry

若源 url 为境外地址, 更新为国内镜像

npm config set registry https://registry.npm.taobao.org/

1.1 创建 Vue2 项目

安装插件

cnpm install -g @vue/cli-init

创建项目

vue init webpack my_project

运行项目

cnpm run dev

WebStorm 运行项目
创建项目后用 WebStorm 导入, 在编译运行 npm.

安装插件

安装 Element UI 和 axios

cnpm install element-ui -S

cnpm i axios -S

在 main.js 中添加下面内容

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

Vue.use(ElementUI)
Vue.prototype.$axios = axios

添加 Bootstrap 和 jQuery

cnpm i bootstrap-vue bootstrap -S
cnpm i jquery -S

在 main.js 中添加下面内容

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

运行 JS 代码时, 运用下面形式.

$(function () {
  console.log('success')
});

静态资源使用

使用静态资源 jQuery.

1.2 创建 Vue3+ 项目

创建项目

vue create my_project

运行项目

cnpm run serve

图形管理

vue ui

也可以在图形化界面直接创建项目

按照一步一步创建基于可以

运行和打包等

安装插件

这个安装插件直接在图形化界面安装即可