vue-cli创建项目，vue项目目录介绍

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配置文件 一般不动