vue-cli创建项目
环境搭建
- 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/en
- 安装cnpm
-加速下载第三方模块:(用来替换npm命令的)
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架
cnpm install -g @vue/cli
- 清空缓存处理
npm cache clean --force
项目的创建
使用vue脚手架,创建vue项目
vue create 项目名// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件
//标准eslint,自动修复(ESlint+Standard config--》lint on save+Lint and fix on commit)
另一种创建vue项目方式:图形化界面
vue ui 使用图形界面创建项目
运行项目
运行vue项目的两种方式
-使用名:npm run dev
-使用pycharm运行:绿色箭头
vue项目目录介绍
first_vue #项目名
-node_modules # 项目有很多依赖都放在这,等同python的 .venv文件夹,可以删掉,非常多小文件,复制很慢,如果没了,执行 cnpm install 就可以在装上,装完项目可以运行
-public # 文件夹(一般不动)
favicon.ico # 网站小图标
index.html # spa:单页面应用---》整个vue项目其实就这一个html页面,以后都是组件切换
-src # 开发重点,以后代码几乎都是写在这里
-assets # 放一些静态资源:图片,css,js
-logo.png # 组件中使用的图片
-components # 放组件:小组件
-HelloWorld.vue # 默认提供给咱们的
-views # 放组件:页面组件
HomeView.vue # 首页
AboutView.vue#关于
-router # 装了vue-router就会有这个文件夹
-index.js
-store # 装 vuex 就会有这个文件夹
-index.js
-main.js # 整个项目的入口
-App.vue #根组件
-.gitignore # 使用了git,忽略文件
-babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法
-package.json # 放了项目的依赖
-package-lock.json # 锁定文件--》锁定依赖的版本
-README.md #介绍文件
-vue.config.js # vue配置文件 一般不动