vue安装基础脚手架重要步骤

大家好我是你们的好朋友小克，今天突然感觉无聊，坐在床上也不知道干什么就灵感一动来写一篇博客吧。不废话了今天我们就来学习一下怎么安装vue脚手架。

        如果有什么不懂或者有更好的意见可以随时提供给我 这是我的QQ : 860095347

  

 一、安装node环境  

        如果不确定自己是否安装node了,可以在命令行工具内执行： node -v

 

    如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：http://nodejs.cn/download/

    注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；

    

  二、 vue-cli 全局安装

            命令行执行 : npm install -g vue-cli （下载vue-cli如果加-g就是代表全局的）

                

 三、初始化项目

        执行命令： vue init webpack demo(demo及你创建项目的名称)

        注意：不要命名为中文不然后面会出现很多恶心的bug

        执行这个命令完一路回车就可以

 四、安装依赖

    1）执行命令： cd demo(命令及进入项目文件夹)

       2）执行命令： npm install或者i(安装依赖包)

五、启动项目

     执行命令： npm run start 或者 npm  run dev (启动项目)

        

六、打包项目

    执行命令： npm run build(打包项目) 

七、介绍文件的配置

    

    build 和 config  是关于webpack的配置，里面包括一些server,和端口；

    node_modules: 安装依赖代码库；

    src :  存放源码；

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

    .babelrc:把es6文件编译成es5 

.babelrc文件

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

.editorconfig：编辑器的配置

.editorconfig

charset = utf-8  //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2   //缩进大小是2格
end_of_line = lf   //换行符的风格
insert_final_newline = true  //当你创建一个文件，会自动在文件末尾插入新行
trim_trailing_whitespace = true  //自动移除行尾多余空格

.eslintignore 忽略语法检查的目录文件

就是忽略对build/*.js和 config/*.js

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"
  ]
}

入口文件： index.html    和 main.js