vue-cli创建项目

环境搭建

　　1、安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

　　2、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　3、安装脚手架

cnpm install -g @vue/cli

　　4、清空缓存处理

npm cache clean --force

项目的创建

　　创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
//标准eslint，自动修复（ESlint+Standard config--》lint on save+Lint and fix on commit）
vue ui 使用图形界面创建项目

　　启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

　　打包项目

npm run build
// 要在项目根目录下进行打包操作

　　package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 运行项目
    "build": "vue-cli-service build",  # 编译项目成html，css，js
    "lint": "vue-cli-service lint"     # 代码格式化
},

 vue项目目录介绍运行项目

　　运行项目方式一

在项目路径下:npm run serve

　　使用pycharm运行

点击绿色箭头运行

　　目录介绍

-myfirstvue   # 项目名字
      -node_modules  # 放着当前项目所有的依赖，可以删除，删除项目运行不了了,npm install 把该项目的依赖再装上，把项目发给别人，提交到git上，文件夹要删掉
    -public   # 文件夹
        -favicon.icon  # 小图标
      -index.html   # 单页面开发，整个项目就这一个页面，以后不要动
    -src     # 以后咱们都是在这里面写东西
        -assets  # 放静态资源，图片，js，css
      -components  # 组件，xx.vue组件，小组件，给页面组件用
          -HelloWorld  # 提供的默认组件，示例
      -router     # vue-router就会有这个文件夹
          -index.js   # vue-router的js代码
      -store      # vuex 就会有这个文件夹
          -index.js   # vuex 的js代码
      -views     # 组件，页面组件
          -About
        -Home   # 默认提供了示例组件
      -App.vue   # 根组件
      -main.js   # 项目的入口于
     -.gitignore   # git的忽略文件
   -babel.config.js  # babel配置
   -package.json  # 项目的所有依赖，类似于  requirements.txt,不要删，npm install根据这个文件下载第三方模块
  -vue.config.js  # vue的配置

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
    --favicon.ico
    --index.html:项目入口页面，单页面
src: 项目目标,书写代码的地方
    -- assets:资源
    -- components:组件
    -- views:视图组件
    -- App.vue:根组件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）