Vue脚手架

• @vue/cli是Vue官方提供的一个全局模块包(得到vue命令),此包用于创建脚手架项目;
• 脚手架是为了保证各施工过程顺利进行而搭设的工作平台;
• 脚手架的好处:

1. 开箱即用(拿来就用);
2. 零配置webpack(支持babel,支持css.less.图片.字体的打包,支持开发服务器);
3. 使用它的目的:在vue脚手架的基础上,快速开发;

• @vue/cl的安装:

1. npm -g i @vue/cli  ------  yarn global add @vue/cli;
2. 在终端输入vue(不报错),vue -v(显示版本号),则说明安装成功;

• 全局安装完毕@vue/cli模块包,我们会得到全局vue命令;
• @vue/cl的创建项目和启动开发服务:

1. 创建项目:vue creat vuecli-demo (项目名),注意:不能有大写字母,中文和特殊符号);
2. 选择模板和包管理器,等待脚手架项目创建完毕(就是一直按回车就可以了);
3. 在终端输入cd进入项目下,启动内置的webpack本地热更新开发服务器---浏览项目页面,cd vuecli-demo(文件名) --> yarn serve或npm run serve;
4. 如果未自动弹出浏览器,手动打开输入提示的域名+端口(有个localhost:8080的网址,在浏览器打开即可)浏览项目页面;

• @vue/cli的目录和代码分析:
•  项目架构:

1. main.js  ------  项目打包主入口 -- Vue初始化
2. App.vue  ------  Vue页面主入口
3. index.html  ------  浏览器运行的文件
4. 三个文件之间的关系:App.vue(vue页面) => main.js(打包,桥梁作用) => index.html(注入打包后的文件,并通过浏览器显示出来);

• 在src并列处(根目录下)准备vue.config.js配置文件(里面可以改端口数,然后yarn serve就可以打开了;