vue与element-ui的结合，脚手架第一步【vue日记】

最新推荐文章于 2024-06-25 10:30:55 发布

前端的小混混

最新推荐文章于 2024-06-25 10:30:55 发布

阅读量1.1k

点赞数

一,关于初始化vue项目

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

二.引入element-ui组件


 
 
  
  
   
   import 
   
   Vue 
   
   from 
   
   'vue'
  
  
  
  
   
   import 
   
   App 
   
   from 
   
   './App'
  
  
  
  
   
   import 
   
   router 
   
   from 
   
   './router'
  
  
  
  
   
   import 
   
   ElementUI 
   
   from 
   
   'element-ui'
  
  
  
  
   
   import 
   
   'element-ui/lib/theme-default/index.css'
  
  
  
  
   
   // 完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
  
  

  
  
   
   Vue.
   
   config.
   
   productionTip = 
   
   false
  
  
  
  
   
   Vue.
   
   use(
   
   ElementUI)
  
  
  
  
   
   // 当插件那样运用
  
  
  
  
   
   /* eslint-disable no-new */
  
  
  
  
   
   new 
   
   Vue({
  
  
  
  
   
     
   
   el: 
   
   '#app',
  
  
  
  
   
     
   
   router,
  
  
  
  
   
     
   
   template: 
   
   '<App/>',
  
  
  
  
   
     
   
   components: { 
   
   App }
  
  
  
  
   
   })

三.关于配置sass

如何配置sass
一、安装对应依赖node模块：
 
 
  
  
   
    
       
         1 
        
       
         2 
        
        
         
         npm install node-sass --save-dev 
         
         
         npm install sass-loader --save-dev 
         
       
  
  
 
 
二、打开webpack.base.config.js在loaders里面加上
 
 
  
  
   
   
  
  
  
   1 rules: [
 2       {
 3         test: /\.vue$/,
 4         loader: 'vue-loader',
 5         options: vueLoaderConfig
 6       },
 7       {
 8         test: /\.js$/,
 9         loader: 'babel-loader',
10         include: [resolve('src'), resolve('test')]
11       },
12       {
13         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
14         loader: 'url-loader',
15         query: {
16           limit: 10000,
17           name: utils.assetsPath('img/[name].[hash:7].[ext]')
18         }
19       },
20       {
21         test: /\.scss$/,
22         loaders: ["style", "css", "sass"]
23       },
24       {
25         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
26         loader: 'url-loader',
27         query: {
28           limit: 10000,
29           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
30         }
31       }
32     ]
33   }
  
  
   
   
  
  
 
 
三、在用scss的地方写上
 
 
  
  
   
    
       
         1 
        
        
         
         <style lang= 
         "scss"  
         scoped= 
         ""  
         type= 
         "text/css" 
         ></style>