vue学习基础（2）脚手架安装、项目创建、介绍目录

1、VueCli3.x小白入门-安装脚手架

工作中很少使用cdn的形式开发，一般都使用脚手架开发

（1）安装node.js

参考网址https://nodejs.org/zh-cn/，下载当前发布版进行安装

安装完成后执行

node  -v

npm  -v

npmjs.com有各式各样的插件

脚手架的好处：

1、脚手架可以大大的提高开发效率；

2、可使用最主流的ecmascript语法；

3、通过webpack实现变异查看效果（非浏览器编译）；

4、自动更新，可实时查看最新效果等；

（2）安装vue cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

执行vue --version
查看是否安装成功，以及版本号

2、搭建项目，参考网址https://cli.vuejs.org/zh/guide/creating-a-project.html

（1）执行命令，创建项目： vue create  hello(项目名)

（2）选择手动去选择一些对应功能

（3）安装一个最基础的babel

(4)选择当前要管理依赖包的文件，选择package.json

(5) cd 项目名

（6）npm run serve

3、VueCli3.x小白入门-介绍目录

 

(1) README.md 是做当前项目启动安装的提示

npm install

npm run serve

npm run buid  打包后，使用npm run build

npm run test  测试的

(2) package.json  这个文件非常重要，凡是更改了这个文件的内容，都需要重启服务

"scripts"部分，项目启动方式

"dependencies":依赖

"devDependencies":依赖的插件

(3)babel.config.js    针对es6等语法进行配置、转换

(4).gitignore  忽略某些文件，有些文件是没有必要上传的

(5)public文件，favicon.ico,公司的图标

(6)node_modules,里面的内容为所有下载的依赖

(7) src文件夹

      ------assets:所有的静态文件，css、js、images

      ------components:组件，对应所有的组件内容

<template>
  <!--HTML结构：只能有一个跟标签-->
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  //js部分
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*css样式部分*/
h3 {
  margin: 40px 0 0;
}

</style>

      ------App.vue   根组件，最顶级的组件

      ------main.js  逻辑的入口文件

import Vue from 'vue'//引入vue框架
import App from './App.vue'//引入组件

Vue.config.productionTip = false//进行配置


//实例化对象
new Vue({
  render: h => h(App),
}).$mount('#app')//挂载到容器中