准备工作
准备工作
- VUE基础 https://cn.vuejs.org/
- Webpack https://www.webpackjs.com/concepts/
- ElementUI https://element.eleme.cn/#/zh-CN
初识化VUE项目
配置nodejs 环境 ： http://nodejs.cn/download/
ZeyangdeMacBook-Pro:~ zeyang$ node -v
v10.7.0
ZeyangdeMacBook-Pro:~ zeyang$ npm -v
6.5.0
安装vue
npm install vue
npm install vue-cli
ZeyangdeMacBook-Pro:~ zeyang$ npm install vue
npm WARN saveError ENOENT: no such file or directory, open '/Users/zeyang/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/zeyang/package.json'
npm WARN zeyang No description
npm WARN zeyang No repository field.
npm WARN zeyang No README data
npm WARN zeyang No license field.
+ vue@2.6.11
added 1 package from 1 contributor in 1.059s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.5.0 → 6.14.4 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.4 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
ZeyangdeMacBook-Pro:~ zeyang$ npm install vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN saveError ENOENT: no such file or directory, open '/Users/zeyang/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/zeyang/package.json'
npm WARN zeyang No description
npm WARN zeyang No repository field.
npm WARN zeyang No README data
npm WARN zeyang No license field.
+ vue-cli@2.9.6
added 239 packages from 205 contributors in 17.254s
╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.5.0 → 6.14.4 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.14.4 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯
创建项目
ZeyangdeMacBook-Pro:Desktop zeyang$ vue-init webpack mysite
? Project name mysite
? Project description A Vue.js project
? Author adminuser <2560350642@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "mysite".
# Installing project dependencies ...
# ========================
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> fsevents@1.2.12 install /Users/zeyang/Desktop/mysite/node_modules/fsevents
> node-gyp rebuild
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
ld: warning: text-based stub file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation.tbd and library file /System/Library/Frameworks//CoreFoundation.framework/CoreFoundation are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//CoreServices.framework/CoreServices.tbd and library file /System/Library/Frameworks//CoreServices.framework/CoreServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork.tbd and library file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/CarbonCore.framework/Versions/A/CarbonCore.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/CarbonCore.framework/Versions/A/CarbonCore are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/Metadata.framework/Versions/A/Metadata are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/AE.framework/Versions/A/AE.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/AE.framework/Versions/A/AE are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList are out of sync. Falling back to library file for linking.
> core-js@2.6.11 postinstall /Users/zeyang/Desktop/mysite/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> ejs@2.7.4 postinstall /Users/zeyang/Desktop/mysite/node_modules/ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/zeyang/Desktop/mysite/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
added 1305 packages from 688 contributors in 32.347s
# Project initialization finished!
# ========================
To get started:
cd mysite
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
运行服务器
npm run dev
使用ElementUI
npm i element-ui -S
修改main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
测试
<template>
<div id="app">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</template>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果
