Vue之脚手架及第三方组件库的安装使用


1.vue脚手架

# 脚手架的含义:就是一个写好空模板的vue框架,我们只需填写自己的内容即可


# node的安装,官方下载,一路下一步
    -node === python
    -npm  === pip
    
# 使用npm安装第三方模块,速度慢一些,换成淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cmpm代替npm的使用


# 安装脚手架:
    cnpm install -g @vue/cli   (-g 是全局安装的意思)

# 创建vue项目
    vue create 项目名
    
    # 选择-自定义创建项目
    	-Choose Vue version  选择版本
        -Babel    语法兼容
        -Router   路由(常用)
        -Vuex     状态管理器
        选项由空格选中
        
        -选择 In.package.json

# 图形化界面创建vue项目
    vue ui   

2.vue脚手架的使用

1.vue-cli项目目录介绍

mysecondvue            # 项目名
    -node_modules      # 项目的依赖包 (类似于venv文件夹),可以删掉,给别人发一定要删除(很大,且别人没法用)
    
    -public            # 文件夹
        -favicon.ico   # 网站标题前的小图标
        -index.html    # 整个网站的index页面,单页面开发
        
    -src               # 文件夹
    	-assets        # 网站的静态文件和资源
        -components    # 一堆组件,小组件
            -HelloWorld.vue # 自定义的组件
        -router        # vue-router相关
            -index.js  # js文件(类似python的__init__)
        -store         # vuex相关(存储变量的,浅学不用了解)
        -views         # 一堆组件,页面组件
            -Home.vue  # 页面组件
        -App.vue       # 根组件
        -main.js       # 整个项目的入口 (类似settings.py)
        
   -.gitignore         # git相关,目前无用	
   -babel.config.js    # 不用管
   -package.json       # 项目依赖的包,类似于 requirments.txt
                       # 后期node_modules删除了,就依赖于这个文件安装模块 npm install 
   -README.md          # 关于项目的介绍
    
        
# 以后写代码,都在src写,其它地方一般不动

2.新建组件,使用组件

# 以后写vue的项目,就是创建组件 编写
    -每个组件都有三部分
        
        
        

# 页面组件的使用步骤
    -新建一个 xx.vue,默认生成了三部分
        -在