服务器对大前端扫盲 Vue.js + Element-UI(6)
|
.eslintrc.js : 配置代码格式风格检查规则, 如每行代码是否强制使用分号; 代码缩进是使用空格还是tab等，在启动工程的时候会进行严格的检查，如果不满足格式就会启动失败，主要是让所有开发人员保持强一致的开发风格。主要是extends: ["standard"]、rules等配置。 .gitignore : git或略的文件 index.html : 入口文件，编译时会将其它代码插入到index.html中 package.json : 项目的配置文件，scripts用于配置的脚本，其中dev和build非常常用，启动项目就是使用 npm run dev命令，这里的dev就是scripts中的dev, npm start就是对npm run dev的简写;devDependencies用于编译时的依赖，开发时需要，上线时用不到;
5.4 基本流程 在控制台中输入 npm run dev,然后在浏览器上访问:8080/#/helloworld 通过router/index.js配置好的/helloworld路径(path)找到对应的组件(component) HelloWorld.vue import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/helloworld', name: 'HelloWorld', component: HelloWorld } ] }) HelloWorld.vue 就是要访问的内容 <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'HelloWorld.vue' } } } </script>
<!-- style 标签省略了 -->
HelloWorld.vue的内容将会替换到App.vue中 <router-view/> <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <!-- style 标签省略了 -->
App.vue的内容将会注入到index.html中的body标签里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>platform-webapp</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
最终的效果如图
六：集成Element 6.1 安装element-ui # 切换到项目根目录 $ cd <project root dir> # 安装element-ui, 安装后package.json中dependencies就会增加element-ui依赖 $ cnpm i element-ui -S 6.2 在main.js中配置element-ui 在main.js中增加导入和让Vue使用ElementUI import Vue from 'vue' import App from './App' import router from './router' // 导入element-ui import ElementUI from 'element-ui' Vue.config.productionTip = false // Vue使用ElementUI Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 6.3 安装依赖 cnpm install 6.4 使用element-ui HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <el-button type="primary">主要按钮</el-button> （编辑：ASP站长网） |
居龙：中国大陆首次成