Vue-cli的使用

3.Vue-cli的使用

我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出我们的所有项目文件

1. 全局安装vue-cli

   1. npm install --global vue-cli

       

2. 项目创建

   1. vue init webpack 项目名

       

3. 运行调试项目

   1. // 进入项目目录下，执行下面指令

      npm run dev

       

4. 项目打包

   1. npm run build

       

项目目录结构

 

 

• 文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
• 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
• 文件夹3(components)，组件目录，vue格式的单文件组件都存在这个目录中
• 文件夹4(router)，路由目录，在此文件夹中配置组件路由

还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

页面结构说明

 

 

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。