vue笔记

工欲善其事必先利其器,首先我们得有一个趁手的ide,一直习惯使用phpstorm,但是Ctrl+Alt+l的格式化实在满足不了ESLint校验我们写的代码!

1.phpstorm配置ESlint检查代码

image.png

Ctrl+ALT+L是phpstorm自带的快速格式化的缩进量，我们需要配置eslint格式化快捷键。如图添加快捷键ALT+L即可，以后就可以用Alt+L格式化成符合eslint规则的格式代码。

image.png

此时使用Alt+L就可以爽歪歪的使用代码格式化了

2.phpstorm在vue文件中使用stylus

image.png

以下插件也可以一并安装

image.png

装完后记得重启!

3.安装vue-cli

安装前记得切换国内源
npm config set registry https://registry.npm.taobao.org

npm i -g cnpm

npm info underscore
//　有　registry.npm.taobao.org　等字样　　说明切换成功
接着安装vue-cli

npm i -g @vue/cli@3

4.初始化vue项目

vue init webpack admin

[图片上传中...(image.png-a9f0fd-1561989872025-0)]
按照图片指示操作即可

安装element-ui 
npm i element-ui –S 
安装axios
npm i axios -S
安装 avue
npm i @smallwei/avue -S
使用方式:
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
安装js-cookie插件
npm install js-cookie --save
安装vuex
npm install vuex --save

如果出现 Module not found: Error: Can't resolve 'sass-loader'
安装下下面扩展即可

npm install node-sass --save-dev
npm install sass-loader --save-dev

安装vue版本ECharts
npm install vue-echarts --save
使用

基本使用

    
        
        
        
    
    

        


        
        

            

            

            

            
{{fullName}}
            
{{count}}
             
            
hhhhhhhh
            显示/隐藏
            
            
            

                
{{v}}
            
            
        
    
    

子父组件之间的传值

    
        
        
        
    
    
        

            

                
                提交
            

            

                
                
            

        
    
    

计算属性之 geter,seter

    
    



    


        

            {{fullName}}
        
    
    

样式操作

    
    




    

        

            
            
            
            

            
hello


        
    

vue.png

图片为学习转载,侵删