Vue项目初始化（Vu脚手架）

vue-cli是vue的脚手架,负责协助编写基础代码
官网地址

检查node并安装vue-cli

# 确保node版本在4以上
node -v          
v6.9.5

# 安装vue-cli,npm全局安装
npm install -g vue-cli

初始化vue项目

# 使用vue-cli初始化项目
vue init webpack sell(课程项目叫sell)

#--------------------------------------
This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack#1.0 sell

? Project name sell
? Project description A Vue.js project
? Author test
? Vue build standalone
? Install vue-router? No #为了后面的手动安装
? Use ESLint to lint your code? Yes #因为要用ESLint检查代码
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "sell".

   To get started:

     cd sell ## 这里已经提示了怎么安装相关模块和启动dev服务器了
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

安装需要用到的模块并启动dev服务器

cd sell
sudo npm install #根据package.json来安装需要的模块
npm run dev ##运行开发测试服务器,会自动打开浏览器,并且自动显示测试页面

参考链接:vue-cli 入门

babelrc

这是babel的配置文件

主要功能:

编译es6转义为es5
一般用2个插件es2015,stage-2,transfer-runtime

参考链接:babel6 入门

eslintrc.js

这是ESLint的配置文件,至于为什么用ESLint的话,就是为了自动检查代码,保持一致的代码风格,从而保证代码质量.

这里需要注意的是,在eslintrc.js文件里面:rules是自定义的检查规则,可以覆盖默认的检查规则,例如要加分号,函数要加空格,这个跟代码风格有关

 'rules': {
   // allow paren-less arrow functions
   'arrow-parens': 0,
   // allow async-await
   'generator-star-spacing': 0,
   // allow debugger during development
   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
   'space-before-function-paren': 0, //函数参数前面要加空格
   'space-before-blocks': 0, //函数块前面要加空格
   'semi': 0 //分号检查
 }

index.html

默认是没有meta的,需要自己添加,添加的部分都是一些常用的移动端使用的
项目使用了reset.css来保持浏览器css属性的纯洁,科普信息(里面介绍了normalize和reset):来，让我们谈一谈 Normalize.css
index.html本身并没有什么特别的东西,只有一个id为app的div,webpack会帮我们将其他东西打包并插入到这个文件里面去,id为app的div是为了vue的一个父组件定位,也可以不写在里面
webpack打包的时候会生成一个app.js,里面包含了所有需要的css,图片,js,参考:webpack2入门,不过正式环境和测试环境是不一样的,正式环境会分拆和压缩和转译等,做了相当多的操作来配合正式环境使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sell</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="static/css/reset.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

main.js

这是vue-cli项目使用的一个主js文件,这是在webpack配置的时候定义的,是主js入口

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 导入内置的vue模块(npm的node_module里面)
import App from './App' // 导入当前目录的App文件为App

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //vue父实例的挂载点
  template: '<App/>', // 主组件的模板
  components: { App } // 使用导入的App,es6对象写法
})

App其实就是App.vue

主要的步骤:

导入模块或者导入文件之后,才能被使用,这种导入方式是es6的模块导入方式
vue初始化实例的方式,并且注册组件来使用

/* eslint-disable no-new */是elint的特殊规则的另外一种写法,这个意思是可以单独new而不用赋值,这是为了适应vue的初始化vue实例的写法

阅读全文

公众号近期文章

赞赏支持

介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运