zoukankan      html  css  js  c++  java
  • Vue脚手架Vue-cli安装

    注:3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli.且安装前提是已经全局安装过node 和 webpack.

    所有版本安装

      vue -V 查看版本
      npm uninstall vue-cli -g 非3.x时卸载
      npm install -g @vue/cli 装3
      npm install -g @vue/cli-init 桥接2

    初始化项目

    执行命令: vue init webpack demo 新建的项目名/文件名

          vue init webpack .          在当前目录新建的项目

      执行之后会有输入设置.

    • Project name ->soho <项目名称> 项目名称不能包含大写字母.

    • Project description ->项目描述

    • Author ->作者

    • Vue build ->standalone

    • Install vue-router? ->Yes

    • Use ESLint to lint your code? ->Yes

    • Pick an ESLint preset ->Standard

    • Setup unit tests with Karma+Mocha? ->No

    • Setup ese tests with Nightwatch? ->No

    项目文件配置介绍

    1-> build 和 config 是关于webpack的配置,里面包括一些server,和端口;

    2-> node_modules: 安装依赖代码库;

    3-> src : 存放源码;

    4-> static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。

    5-> .babelrc:把es6文件编译成es5

    具体文件如下:

    .babelrc文件
    { "presets": ["es2015", "stage-2"],//表示预设,表示babelrc转换预先需要安装的插件 "plugins": ["transform-runtime"],//把es6的方法做转换 "comments": false //false表示转换后代码不生成注释 }

      

    .editorconfig忽略语法检查的目录文件就是忽略对build/*.js和 config/*.js
    charset = utf-8 //编码
    indent_style = space //缩进风格,基于空格做缩进
    indent_size = 2 //缩进大小是2格
    end_of_line = lf //换行符的风格
    insert_final_newline = true //当你创建一个文件,会自动在文件末尾插入新行
    trim_trailing_whitespace = true //自动移除行尾多余空格
    

      

    package.json文件
    {
    "name": "demo",
    "version": "1.0.0",
    "description": "demoApp",
    "author": "",
    "private": true,
    "scripts": { /*表示可以执行一些命令,例如:npm run dev会执行node build/dev-server.js,npm run build会执行node build/build.js,因此可以通过scripts配置脚本*/
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src"
    },
    "dependencies": { /*项目的依赖*/
    "vue": "^2.2.2",
    "vue-router": "^2.2.0"
    },
    "devDependencies": { //编译需要的依赖
    .......................
    },
    "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
    },
    "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
    ]
    }
    

      

  • 相关阅读:
    【译】用 Chart.js 做漂亮的响应式表单
    【译】快速高效学习Java编程在线资源Top 20
    【译】理解Spring MVC Model Attribute 和 Session Attribute
    Github 恶搞教程(一起『玩坏』自己的 Github 吧)
    Effective Java 读书笔记(一):使用静态工厂方法代替构造器
    JavaScript 中 onload 事件绑定多个方法的优化建议
    【译】常见 Java 异常解释(恶搞版)
    Java 重写 equals 与 hashCode 的注意事项
    【译】Java语言速览:StackOverflow
    【译】StackOverflow——Java 中的 finally 代码块是否总会被执行?
  • 原文地址:https://www.cnblogs.com/Scooby/p/11740640.html
Copyright © 2011-2022 走看看