创建一个Vue

Vue 帮我省去了建立webpack包 的大部分时间,相当于是一个快速开发工具等.

Vue优势

总结: 

花更少的时间,干更多的或.加快开发网的站速度. 

不说了 上步骤了.

1.安装 Vue /cli 安装

把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

 全局安装命令

     yarn global add @vue/cli 

      或者 

      npm install -g @vue/cli

打开终端

 

 

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c

       - 停止重新来

       - 换一个网继续重来

查看vue脚手架版本  

        -vue -V   (V是大写)

2. 第二步,  @vue/cli 创建项目启动服务

注意: 项目名不能带大写字母, 中文和特殊符号

1.创建项目 :

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

选择模板 :

   可以上下箭头选择, 弄错了ctrl+c重来

2.选择用什么方式下载脚手架项目需要的依赖包 .   yarn  或者  npm

3. 回车等待生成项目文件夹+文件+下载必须的第三方包们  

4.进入脚手架项目下, 启动内置的热更新本地服务器  

如果切不过去 就反键 vuecli-demo 文件夹 ,点击 在集成终端中打开

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的 . 你就成功了.

 5.打开浏览器输入上述地址

 总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

3.  @vue/cli 目录和代码分析

 主要文件

4. @vue/cli 项目架构了解

 5.@vue/cli 自定义配置

src并列处新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

6. @vue/cli 单vue文件讲解

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行