1、Vue-Cli是vue官方提供的,用来搭建项目脚手架的工具。它是vue.js开发的标准工具,它已经集成了Webpack,内置了很多常用的配置,使得我们在使用Vue开发项目时更加的标准化。
2、作用:通过Vue-Cli下载项目模板。
在安装vue-cli之前,先确保已经装了node.js(8.9版本或更高)
1.在终端安装全局vue-cli
npm install -g @vue-cli
2.安装完成后检查是否成功,输入版本,看是否显示
vue --version
1.打开要创建项目的文件夹,在地址栏打开cmd,输入:
vue create 项目名
2.选择配置
defaule是默认配置,里面的babel是解决兼容性的配置,eslint是规范化用的。
Manually …是自定义配置
选择默认配置之后,等待下载模板完成
根据提示先后输入两行代码,进入项目=>运行项目
打开vs,查看项目文件
每个文件夹是干什么的:
node_modeles:存放依赖;
public:里面存放静态资源文件;
src:主要是源代码;
src/assets:静态资源文件,被webpack打包之后在dist文件夹中会被重命名;
src/components:存放组件
其他的文件在后面自定义创建的vue-cli项目再说
这里选择Manually…自定义配置
选择常用的几个就可,根据需求来。没选的之后开发需要也可以在项目里安装。
最后一个问依赖是否都放在package.json中,都可以,这里我选择每个依赖单独一个文件。
安装运行完成后,打开项目文件查看
和默认的相比,src中多了router和views文件夹。
views:存放基本的路由组件;components中存放的主要是布局用的大的组件;
router:index.js文件,配置了路由表;
App.vue是渲染出口,在main.js中给App.vue导入路由,就能渲染出来。
除了原本就有的 文件,我们需要自己创建的文件:
vue.config.js
其中有个proxy是用来解决跨域问题的,我们还需要创建两个文件来声明目标服务接口地址等,方便之后需要连接easy-mock
跨域问题解决之后,就可以创建一个axios对象,方便之后调用接口
定义好axios对象别忘记导出。
不知道文件创建在哪里的话后面会展示一个总的文件列表
写好之后在src中创建一个api文件夹,里面放调用axios对象的js文件,例如这样:
完成之后就可以进行页面的加工了,
需要用到的东西要在main.js中定义
要用到Element组件库的话要导入一下然后输入
Vue.use(ElementUI)
刚开始学,不定时更新、修改