通过vuecli创建vue

一:安装node环境

1.下载地址:https://nodejs.org/zh-cn/download/
2.检查是否安装成功:node -v

二:全局安装vue cli3

提示(可以安装淘宝镜像):npm install -g cnpm –registry=https://registry.npm.taobao.org
1.安装命令:npm install -g @vue/cli
2.卸载命令:npm uninstall vue-cli -g
3.查看是否安装成功:vue -V || vue --version

三:创建vue项目

1.vue create 项目名称
2. Default ([Vue 2] babel, eslint) vue2默认配置
	Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue3默认配置 
	Manually select features 手动配置
3. ( ) Choose Vue version->选择版本
	(*) Babel->编译
	( ) TypeScript->是否支持TypeScript
	( ) Progressive Web App (PWA) Support->是否支持pwa
    ( ) Router->vue路由
	( ) Vuex->vue状态管理
	( ) CSS Pre-processors->css 预处理器
	(*) Linter / Formatter->代码规范检测
	( ) Unit Testing->单元测试
	( ) E2E Testing->端到端测试
3. Use history mode for router?->是否使用路由的history模式
4. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
	如果上面选择了Css预处理器选项就会让选这个
5. Where do you prefer placing config for Babel, ESLint, etc.? 是否需要将你的配置分开
6. Save this as a preset for future projects? 将以上的配置保存为一个默认配置
7. 创建完成进入创建好的目录直接->npm run serve 启动项目

四:项目目录

1.node_modules->依赖包目录
2.public->静态资源目录
3.src->代码目录
4.browserslistrc->浏览器相关支持
5.gitignore->提交git时忽略的文件
6.babel.config.js->es语法转换
7.package.json->项目基本信息
8.package-lock.json->模块与模块之间的版本依赖关系
9.README.md->项目介绍

猜你喜欢

转载自blog.csdn.net/weixin_41656377/article/details/113440075