vue cli 创建项目及基本目录介绍

vue cli 创建项目

• step1:我们在D:\wwwroot\vue\base-study01\这个文件夹建立项目;把项目放到这个目录下;
• step2:用CMD命令框我们先进入到这个文件夹下:

CMD下上下选择才更灵活，git只有输入数字，不是很方便；直接cmd创建；

cd /d/wwwroot/vue/base-study01

• step3: 创建项目
  
  vue create vue-demo

  • vue 是命令
  • create 创建
  • vue-demo 项目名字,可以自定义

  • default (babel, eslint)默认的插件
    • babel: 安装之后,可以让我们在当前的项目中随意的使用这些最新的es6,甚至es7的语法;说白了就是把各种javascript千奇百怪的语法统统转为浏览器可以认识的语言;
    • eslint: js语法检查,代码规范;
  • cmd下键盘上下选择Manually select features，手动配置；回车；
  • Check the features needed for your project:
    

    键盘上选择行,按空格选中,再按取消, 目前先安装Babel,其他先不装;

  • 配置文件选择
    • In dedicated config files选择生成一个配置文件
    • In package.json根目录下生成一个package.json

    键盘上下选择In package.json;

  • Save this as a preset for future projects? (y/N)

    是否把你刚才选择的配置保存,以后方便使用,先不保存,以后再选,n; 回车

  • 已经完成,开始慢慢安装插件,工具类,等待安装完毕;

• step4: 进入项目目录启动命令:
  
  npm run serve

vue安装完成后目录功能介绍

• 安装完进入根目录,其实就是一个开发框架;
• node_modules 插件,当前项目的所有依赖,vue把vue的js工具类,放在了node_modules\vue\dist这个下面,引入进来了;这里面结成了很多基础的一些工具;
• public目录,可以理解为入口目录
  • favicon.ico标题图标;
  • index.html当前项目唯一的页面;
• src目录

  • assets: 静态资源img,css,js

  • components: 小组件

  • App.vue 根组件

  • main.js 全局脚本文件(项目的入口)

  • views 页面组件router

  • router – index.js 路由脚本文件

  • store – index.js 仓库基本文件(vuex插件的配置文件)

• READNE.md
• package.json等配置文件