Vue技术栈开发学习,使用vuecli

使用vueui创建、管理项目

Vueui是vue-cli提供的可视化的项目管理工具,执行vueui前需要提前安装好

vue-cli,Windows系统需要软件bash,node.js

下载安装好后再bash先安装vue-cli

npminstall-g

vue/cli

安装之后,你就可以在命令行中访问ue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功

vue--version

再执行vueui,创建项目,然后选择包管理器npm,下一步选手动安装插件

Babel他会将一些es6,7,8,9高级别的es代码转化为一些低级别的es4,5级别的浏览器能够支持的形势

Router路由,Vuex:vue官方的状态管理工具

CssPre-processors:css预处理器常见的有sass,less或stylus

linter/farmatter:编译器做一些代码检测,有固定的的书写风格

勾选useconfigfiles使用配置文件

最后选择css处理器:less,eslint风格(Eslint+standardconfig)这个可以根据个人习惯选择

执行时会自动添加刚刚选的模块,并自动运行安装依赖

项目结构目录梳理

vue-cli创建的项目目录

项目目录

vue.config.js配置文件

//Eslint取消每次保存时进行的eslint的检测

module.exports={

lintOnSave:false

}

package.json

dependencies打包用到的一些依赖

devDependencies开发中用到的一些依赖

定义了项目中的描述:项目的版本、名称、运行的脚本、项目中的依赖

babel.config.js

babel的配置文件

.eslintrc.js

配置eslint的的规则

public为公共文件,index.html模板文件,webpack运行打包是用到的模板

src项目的主文件,assets目录放静态资源)(图片,字体,文件,图标)




转载请注明:http://www.aierlanlan.com/cyrz/5536.html