Vue 搭建脚手架 && 脚手架的文件结构 && 关于不同版本的Vue

 

# 一、Vue 环境搭建
#    1.VsCode 编码插件：Vuter
#    2.Vue 脚手架安装
#        1).安装：npm install -g @vue/cli   or   yarn global add @vue/cli
#        2).创建项目：vue create my-project   or    vue ui
#        3).启动项目：npm run serve
#        4).访问项目：http://localhost:8080/
#        5).Ubuntu安装的时候有可能报错：“Please upgrade your Node version.”
            sudo apt update -y
            sudo apt install -y nodejs nodejs-legacy npm  
            sudo npm config set registry https://registry.npm.taobao.org
            sudo n stable

# 二、脚手架的文件结构：
    ├── node_modules        # 脚手架依赖包
    ├── public            # HTML中的<%= BASE_URL %>就是该文件加的相对路劲
    │   ├── favicon.ico        # 页签图标
    │   └── index.html        # 主页面
    └── src
        ├── assets            # 存放静态资源
        ├── App.vue        # 汇总所有组件
        │   └── logo.png
        ├── components        # 存放组件
        │   ├── School.vue
        │   └── Student.vue
        └── main.js
    ├── .gitignore            # git 代码上传时需忽略的文件
    ├── babel.config.js        # babel的配置文件
    ├── package.json        # 应用包配置文件
    ├── package-lock.json        # 应用包版本的控制文件
    ├── README.md            # 应用描述配置文件

# 三、关于不同版本的Vue：
#    1.vue.js与vue.runtime.xxx.js的区别
#        .vue.js是完整板的Vue，包含：核心功能+模板解析器
#        .vue.runtime.xxx.js是运行班的Vue，只包含：核心功能，没有模板解析器
#    2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定其内容。
# 三、vue.config.js配置文件
# 使用"vue inspect > output.js"指令可以查看到Vue脚手架的默认配置
# 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh/config/