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

简单创建 Vue 的项目

    • 1. 创建一个 Vue 项目
    • 2. 创建一个 Vue + webpack 项目
    • 3. 添加插件
    • 4. 静态资源使用

1. 创建一个 Vue 项目

安装插件

cnpm install -g @vue

创建项目

vue create my_project

运行项目

cnpm run serve

2. 创建一个 Vue + webpack 项目

安装插件

cnpm install -g @vue/cli-init

创建项目

vue init webpack my_project

运行项目

cnpm run dev

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

简单创建 Vue 的项目 (包括一些简单的插件)_第1张图片简单创建 Vue 的项目 (包括一些简单的插件)_第2张图片简单创建 Vue 的项目 (包括一些简单的插件)_第3张图片
简单创建 Vue 的项目 (包括一些简单的插件)_第4张图片
简单创建 Vue 的项目 (包括一些简单的插件)_第5张图片简单创建 Vue 的项目 (包括一些简单的插件)_第6张图片简单创建 Vue 的项目 (包括一些简单的插件)_第7张图片

3. 添加插件

安装 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')
});

4. 静态资源使用

使用静态资源 jQuery.

简单创建 Vue 的项目 (包括一些简单的插件)_第8张图片

你可能感兴趣的:(Java,开发)