vue cli2 脚手架工具的安装和配置

下面是我的配置vue cli2.0的过程,和配置完成后,一些文件夹的作用描述,如有不准确的还请大家指正呀
(1)安装npm i -g vue-cli
检测 vue-V 看有没有安装成功 (见到2.X版本的就对了,3.X就是脚手架版本)
(2)初始化vue项目,vue init webpack
image.png

(3) 在vscode中运行 npm run dev
可以在package.json中看到已经配置好的webpack
image.png
① - --inline 意思是信息显示在哪里
② - -progress 进度条
③ - --config:指定的位置找webpack.config.js的配置文件(指定那个文件作为webpack的配置文件

下面是安装好的vue cli2.0文件夹的描述:
image.png

image.png

  1. 参考src文件夹

(1) assets 静态资源
(2) components 组件
(3) App.vue 根组件 => 指定路由出口
①  脚手架之后,所有的组件都将渲染到 app.vue 中
② app 中的 #app 还是 index.html 中的 #app, app.vue 中的会覆盖前者(因为template的优先级高于el的优先级)
③  <router-view/> 路由出口要写在 app.vue 组件模板中
(4) main.js
① - 入口 js 文件
② - 作用 : 创建 vue 实例,导入其他组件并挂在到 vue 实例上
③ - Vue.config.productionTip = false 不要打印提示

(5) route/index.js => 路由
① 引入模块,然后配置路由的规则
② 注意:
1) 一定要记住 :Vue.use(Router) 模块化公工程中一定要安装路由插件 .js 就是一个模块
2) @符号相当于src路径./src

官网:https://router.vuejs.org/zh/i...

阅读 142发布于 11月12日
推荐阅读
目录