第169天学习打卡（项目 谷粒商城11 使用vue脚手架进行模块化开发 整合ElementUI ）

使用Vue脚手架进行模块化开发

遇到的问题

  vue-cli · Failed to download repo vuejs-templates/webpack: read ECONNRESET
 

 

解决办法：不要在桌面建立vue-demo文件，因为从桌面这个文件中执行cmd命令，初始化会一直出错。解决办法是直接在cmd命令行里面创建这个vue-demo文件

 

生成的vue-demo文件所在位置：C:\Users\HP\vue-demo

 

Hello.vue

 <template>
 <div>
     <h1>你好, Hello, {{name}}</h1>
 ​
 </div>
 </template>
 ​
 <script>
 export default {
     data(){
         return {
             name: "张三"
         }
     }
 ​
 }
 </script>
 ​
 <style>
 ​
 ​
 </style>

index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import Hello from '@/components/Hello'
 ​
 Vue.use(Router)
 ​
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     },
     {
       path: '/hello',
       name: "Hello",
       component: Hello
     }
   ]
 })
 ​

App.vue

 <template>
   <div id="app">
     <img src="./assets/logo.png">
     <router-link to="/hello">去Hello</router-link>
     <!-- 路由视图 -->
     <router-view/>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'App'
 }
 </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>
 ​

App.vue

 <template>
   <div id="app">
     <img src="./assets/logo.png">
     <router-link to="/hello">去Hello</router-link>
     <router-link to="/">去首页</router-link>
     <!-- 路由视图 -->
     <router-view/>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'App'
 }
 </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>
 ​

整合ElementUI快速开发

官网地址： Element - 网站快速成型工具

安装elementui

 npm i element-ui

 

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/>'
 })
 ​

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪哔哩哔哩bilibili