vue-cli创建模板项目

623 阅读1分钟

1、说明:

①、vue-cli是vue官方提供的脚手架工具

②、github地址: github.com/vuejs/vue-c…

③、作用:从github.com/vuejs-templ…

2、创建vue项目

npm install -g vue-cli 

vue init webpack vue_demo      #webpack是脚手架其中的一个模板

cd vue_demo 

npm install 

npm run dev 

访问:http://localhost:8080/

注意:上图是因为,本地vue的脚手架已经下载过;若你的没有下载,记得先执行npm install -g vue-cli命令,再执行如下图的命令即可。

3、模板项目结构

说明:

①、build、config配置文件夹,里面是一些配置的文件

②、node_modules 组件的依赖项

③、src源码,在这里写相应的Vue组件

④、static  放一些全局的资源,如样式啊。

static/.gitkeep文件,给git进行服务的,有这个文件后,static文件及下的文件才能被git管理

⑤、.babelrc作用: ES6转ES5 jsx转js

⑥、.eslintrc.js eslint的配置;.eslintignore 可以配置eslint忽略的文件及文件夹

⑦、.gitignore git的忽略文件及文件夹

⑧、package.json 当前应用的描述文件

描述:一个Vue文件就是一个Vue的组件,把Vue需要的组件嵌入到HTML中。

Vue组件的模板如下:

<template> 
   <div> </div>
</template>
<script> 
   /* 向外默认暴露一个配置对象 */ 
   export default{ }
</script>
<style>

</style>