入门vue---创建项目及vue的两个版本

关于vue的介绍请到vue的官网查看，这里我就不过多赘述，直接上手

目标一：创建一个vue的项目

• 使用vue-cli搭建项目，搜索vue-cli，打开vs code终端，复制图中的最后一句代码yarn global add @vue/cli,global代表全局安装。安装完毕后输入vue --version可以查看版本，版本只要是4开头的版本就可以
  

  vue-cli安装.png

• 把项目放在你想放到的目录下，然后用vs code的终端工具进入这个目录，只需进入即可

• 找到上面图中左边的 创建一个项目 ，在终端内复制下面的代码 vue create hello-world,注意，‘hello-world’是项目名称，不想用可以替换成其他的名字，然后回车

vue create.png

• 接下来就是对这个项目的配置，上下键进行移动，空格键表示选中或者取消，选好之后回车键进入下一个配置，第一个看下图，选择第二个（手动选择特性），第一个是默认的

1.png

• 如图，按照图中选择即可，

2.png

• 如图，想用哪种都行，就是别用第二种（node-scss)

  
  
  3.png

• 如图，直接回车

  
  
  4.png

• 这个选择第二个，用空格键选中，

  
  
  5.png

• 选择第二个

  
  
  6.png

• 直接回车

  
  
  7.png

• 下面这个比较重要，千万不要选错，你打y就代表以后直接用上面的配置，无需再选择配置，打n则相反，然后回车，

  
  
  8.png

• 看到下图，就代表成功了（vue-demo-2是项目名）

  
  
  9.png

• 成功了以后，在vs code中打开这个项目目录，再开启一个终端，运行yarn server,会开启一个本地的预览服务器，如下图，复制网址，浏览器打开即可
  

  10.png

• 浏览器打开的内容如下图，至此，项目创建成功

  
  
  11.png

目标二：如何在codesandbox.io网页里写vue代码

• 用谷歌打开上面的网址

• 点击右上角的' Create Sandbox '

• 出现像下面这样的样子，点击' vue '即可写vue代码

  
  
  create.png

• 如果你和下面的图类似，即可随意写vue代码了

  
  
  vue.png

• 同时这个网站还支持代码下载

目标三：如何理解vue的两个版本

• vue的两个版本可以在官网中看到，分为完整版vue.js和运行时版vue.runtime.js

  
  
  vue的两个版本.png

完整版和运行时版有何区别

• 完整版有编译器，所以代码体积要大，支持template，template可以写在html或者vue代码中
• 不完整版没有编译器，不支持template，需要render，
  以下是示例代码

    完整版视图写在HTML标签或template中：
        new Vue({
          template: '
{{ hi }}
'
        })

    非完整版需要写在render函数里用h创建标签：
      new Vue({
        render (h) {
        return h('div', this.hi)
        }
    })

总结，总是使用非完整版，配合vue-loader和vue文件