那个年vue踩过的坑,详解Vue使用命令行搭建单页面应用

By admin in 4858美高梅 on 2019年4月1日

1.前言

一、安装vue-cli

安装vue-cli的前提是你早已设置了npm,安装npm你能够平昔下载node的安装包进行安装。你能够在命令行工具里输入npm
-v
检查和测试你是不是安装了npm和版本情形。出现版本号说明你早已设置了npm和node,我这边的npm版本为3.10.10。假设该命令不能使用,需求设置node软件包,依据你的种类版本选用下载安装就可以了。

npm没有毛病,接下去大家得以用npm
命令安装vue-cli了,在命令行输入上边包车型地铁指令:

npm install vue-cli -g

  

-g
:代表全局安装。若是您安装时报错,一般是网络难题,你能够尝尝用cnpm来进行设置。安装到位后,能够用vue
-V来进展查看 vue-cli的版本号。注意那里的V是大写的。笔者那边版本号是2.8.1.

一经vue -V的命令管用了,表明已经胜利的把vue-cli安装到大家的微型计算机里了。

写在头里:

利用命令行搭建单页面应用

   
学习Vue前端框架已经五个月了,作为三个web刚入门的菜鸟,在求学的经过中,网上有个别技术博客往往没有怎么能够借鉴的地点,在此处
笔者越发将本身从起首从来到登录的进度记录下来。希望观察自家的小说的意中人们能够少走点弯路,不喜勿喷哟!

二 、开首化项目

小编们用vue init命令来开首化项目,具体看一下那条命令的选拔办法。

vue init <template-name> <project-name>

  

init:表示自个儿要用vue-cli来开头化项目

:表示模板名称,vue-cli官方为大家提供了5种模板,

webpack-四个完美的webpack+vue-loader的模板,功用包罗热加载,linting,检查和测试和CSS增添。

webpack-simple-一个粗略webpack+vue-loader的沙盘,不分包别的功用,让你急迅的搭建vue的开发条件。

browserify-三个完善的Browserify+vueify
的模板,功能包蕴热加载,linting,单元检查和测试。

browserify-simple-1个简易Browserify+vueify的模板,不包括其余作用,让你急速的搭建vue的花费条件。

simple-2个最不难易行的单页应用模板。

:标识项目名称,这几个你能够依照自个儿的档次来起名字。

在实际上开销中,一般大家都会使用webpack这些模板,那大家那边也安装那些模板,在命令行输入以下命令:

vue init webpack vuecliTest

  

输入指令后,会询问我们多少个差不离的选项,大家依照自身的须要实行填空就能够了。

  • Project name :项目名称
    ,倘使不须要变更直接回车就能够了。注意:那里不能够运用大写,所以作者把称呼改成了vueclitest
  • Project description:项目描述,暗中认可为A Vue.js
    project,直接回车,不用编写。
  • Author:小编,借使您有配备git的小编,他会读取。
  • Install vue-router?
    是或不是安装vue的路由插件,大家那边必要设置,所以选择Y
  • Use ESLint to lint your code?
    是或不是用ESLint来界定你的代码错误和品格。我们那里不要求输入n,借使您是巨型团队开发,最棒是拓展安插。
  • setup unit tests with Karma + Mocha?
    是或不是需求设置单元测试工具Karma+Mocha,我们那里不须求,所以输入n。
  • Setup e2e tests with
    Nightwatch?是不是安装e2e来进展用户作为模拟测试,我们那里不需求,所以输入n。

命令行出现上边的文字,表明大家已经开端化好了第贰步。命令行提示大家明天得以作的三件业务。

一 、cd vuecliTest 进入大家的vue项目目录。

二 、npm install
安装大家的花色正视包,相当于设置package.json里的包,假诺您网速不佳,你也能够动用cnpm来安装。

叁 、npm run dev
开发方式下运营我们的先后。给我们自行创设了成本用的服务器环境和在浏览器中开辟,并实时监视我们的代码更改,即时呈现给大家。

vue是何等,是一套创设用户界面包车型大巴渐进式框架(官网解释),什么叫渐进式框架呢,不难回答正是看好最少,这几个概念只好自个儿去看,本人去明白,一千个读者一千个哈姆雷特,不过多的分解。Vue官方文档很圆满的。

我们来看一下尾声形成的功用:

2.开支信赖工具

③ 、Vue-cli项目结构讲解

vue-cli脚手架工具就是为大家搭建了花费所须求的环境,为大家省去了好多活力。有必不可少对那么些环境实行熟谙,咱们就从品类的构造讲起。

Ps:由于版本实时更新和您选用设置的两样(这里列出的是模板为webpack的目录结构),所以您看看的有或者和底下的持有差别。

-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些图片,json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

  

首要文件讲解:

采纳 vue-cli 能够长足成立 vue
项目,vue-cli很好用,可是在初期搭建环境设置vue-cli及连锁内容的时候,对一部分人来说是很高烧的一件工作,本身在搭建vue-cli的门类条件的时候也是踩了一定多的坑,特此写了一篇搭建环境的学科,每一步尽量详细剖析。需求的心上人能够回复参考下,喜欢的能够点波赞,只怕关切一下本人,希望得以帮到大家。

4858美高梅 1

 
 2.1 node.js

package.json

package.json文件是项目根目录下的三个文本,定义该类型开发所需求的各样模块以及一些类型配置消息(如项目名称、版本、描述、作者等)。

package.json
里的scripts字段
,那几个字段定义了您能够用npm运转的吩咐。在付出环境下,在命令行工具中运营npm
run dev 就一定于实践 node build/dev-server.js
.也正是开启了二个node写的开发行提议服务器。因此能够见到script字段是用来钦定npm相关命令的缩写。

 "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },

  

dependencies字段和devDependencies字段

  • dependencies字段指项目周转时所依靠的模块;
  • devDependencies字段钦赐了档次费用时所重视的模块;

在命令行中运转npm
install命令,会自动安装dependencies和devDempendencies字段中的模块。package.json还有不少相关配置,假使您想全盘领悟,能够专程去百度念书一下。

vue-cli脚手架的优势:

大纲

   
2.2 git

webpack配置相关

我们在上头说了运维npm run dev 就一定于履行了node
build/dev-server.js,表明那几个文件卓殊关键,先来理解一下它。
小编贴出代码并付出首要的解释。

  • 有一套成熟的vue项目框架结构划设想计,能够高效早先化叁个Vue项目.
  • vue-cli是法定辅助的1个脚手架,会随本版本实行迭代立异。
  • vue-cli提供了一套本地的node测试服务器,使用vue-cli自个儿提供的命令,就足以运行服务器。
  • 集成打包上线方案。
  1. 下载 node, git, npm

  2. 选用命令行安装3个门类

   
2.3 Visual Studio Code

dev-server.js

// 检查 Node 和 npm 版本
require('./check-versions')()

// 获取 config/index.js 的默认配置
var config = require('../config')

// 如果 Node 的环境无法判断当前是 dev / product 环境
// 使用 config.dev.env.NODE_ENV 作为当前的环境

if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)

// 使用 NodeJS 自带的文件路径工具
var path = require('path')

// 使用 express
var express = require('express')

// 使用 webpack
var webpack = require('webpack')

// 一个可以强制打开浏览器并跳转到指定 url 的插件
var opn = require('opn')

// 使用 proxyTable
var proxyMiddleware = require('http-proxy-middleware')

// 使用 dev 环境的 webpack 配置
var webpackConfig = require('./webpack.dev.conf')

// default port where dev server listens for incoming traffic

// 如果没有指定运行端口,使用 config.dev.port 作为运行端口
var port = process.env.PORT || config.dev.port

// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware

// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置
var proxyTable = config.dev.proxyTable

// 使用 express 启动一个服务
var app = express()

// 启动 webpack 进行编译
var compiler = webpack(webpackConfig)

// 启动 webpack-dev-middleware,将 编译后的文件暂存到内存中
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
})

// 启动 webpack-hot-middleware,也就是我们常说的 Hot-reload
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// proxy api requests
// 将 proxyTable 中的请求配置挂在到启动的 express 服务上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

// handle fallback for HTML5 history API
// 使用 connect-history-api-fallback 匹配资源,如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())

// serve webpack bundle output
// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
app.use(devMiddleware)

// enable hot-reload and state-preserving
// compilation error display
// 将 Hot-reload 挂在到 express 服务上
app.use(hotMiddleware)

// serve pure static assets
// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))

// 让我们这个 express 服务监听 port 的请求,并且将此服务作为 dev-server.js 的接口暴露
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  var uri = 'http://localhost:' + port
  console.log('Listening at ' + uri + '\n')

  // when env is testing, don't need open it
  // 如果不是测试环境,自动打开浏览器并跳到我们的开发地址
  if (process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

  

5.
还有一些亮点,包蕴:模块化,转译,预处理,热加载,静态检查和测试和自动化测试等,等豪门深远应用下去就会发现vue-cli的雄强之处。

那个年vue踩过的坑,详解Vue使用命令行搭建单页面应用。壹 、 下载工具

3.代码

webpack.base.confg.js webpack的根底配置文件

...
...
module.export = {
    // 编译入口文件
    entry: {},
    // 编译输出路径
    output: {},
    // 一些解决方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各种不同类型文件加载器配置
        loaders: {
        ...
        ...
        // js文件用babel转码
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不需要转码
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相关配置
    vue: {}
}

  

此间有无数webpack的学问,作者也有3个专程讲webpack的录制教程,你可以去看一看《跟技术胖学webpack录制教程》。

本学科是基于windows系统。

node, git 的下载大家能够去官网自行下载就足以了。

 
 3.1安装node.js

.babelrc

Babel解释器的布署文件,存放在根目录下。Babel是二个转码器,项目里供给用它将ES6代码转为ES5代码。假如您想掌握越多,能够查看babel的知识。

{
  //设定转码规则
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  //转码用的插件
  "plugins": ["transform-runtime"],
  "comments": false,
  //对BABEL_ENV或者NODE_ENV指定的不同的环境变量,进行不同的编译操作
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

  

下边正式开班搭建vue-cli脚手架。

上面说一说安装 npm,npm 是在上述多少个都安装的景色下才足以的。

        node.js在百度上找寻一共有五个网址:

后边的url是中文网的地点,前面包车型客车是官网的地方。中文网的node版本会比官网的本子低,最起码未来是这般。笔者利用的是新型版本v10.3.0
在官网下载的 安装流程就不说了。一路向下就行,极粗鲁的。安装完结,运维 node
-v 和npm -v 检查是不是中标安装。

.editorconfig

该文件定义项目标编码规范,编写翻译器的作为会与.editorconfig文件中定义的同样,并且其事先级比编译器自己的设置要高,那在多个人合营开发项目时拾壹分有用并且须要。

root = true

[*]    // 对所有文件应用下面的规则
charset = utf-8                    // 编码规则用utf-8
indent_style = space               // 缩进用空格
indent_size = 2                    // 缩进数量为2个空格
end_of_line = lf                   // 换行符格式
insert_final_newline = true        // 是否在文件的最后插入一个空行
trim_trailing_whitespace = true    // 是否删除行尾的空格

  

那是相比较首要的关于vue-cli的计划文件,当然还有众多文件,大家会在以往的小说中教师。

命令行工具

境内向来 git npm 一点也一点也不快,所以我们到 taobao 的 npm 镜像上边去下载安装
镜像地址>>

4858美高梅 2

四、Vue-cli的模板

命令行工具是大家操作npm的根底,这些要求求有的,很多科目没有写清楚,那多少个教程一上来就贴上一大堆命令,当初也不明白在哪个地方使用命令行工具。。。

4858美高梅 3

 

1、npm run build 命令

有小伙伴问笔者,怎么着把写好的Vue网页放到服务器上,那小编就在此处上课一下,首要的一声令下正是要选拔npm
run build 命令。大家在命令行中输入npm run
build命令后,vue-cli会自动实行项目揭发打包。你在package.json文件的scripts字段中得以看出,你执行的npm
run build命令就相对执行的 node build/build.js 。

git bash命令行工具

开拓安装好的 git bash

        那里建议选拔cnpm,cnpm的装置有三种

package.json的scripts 字段:

  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },

  

在实施完npm run
build命令后,在你的品类根目录生成了dist文件夹,那个文件夹里边正是大家要传播服务器上的文件。

dist文件夹下目录包罗:

  • index.html
    主页文件:因为大家开发的是单页web应用,所以说一般唯有3个html文件。
  • static 静态能源文件夹:里边js、CSS和部分图片。

1.windows下自身推荐使用GitHub的桌面管理工科具自带的git
bash命令行工具,平日下载安装就足以。

4858美高梅 4

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

2.main.js文件解读

main.js是任何项指标输入文件,在src文件夹下:

import Vue from 'vue'      
import App from './App'
import router from './router'

Vue.config.productionTip = false   //生产环境提示,这里设置成了false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

  

经过代码能够看出那里推荐了App的组件和的沙盘,它是由此 import App from
‘./App’那句代码引入的。 大家找到App.vue文件,打开查看。

2.下载地址,下图是下载安装完结未来,git
bash的运用格局。

1 . 在 Git Bash 输入镜像的地址:

  或者

3.App.vue文件:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  

app.vue文件我们得以分为三片段解读,

  • 标签包裹的剧情:那是模板的HTMLDom结构,里边引入了一张图片和标签,标签表明使用了路由体制。大家会在事后越发拿出一篇文章讲Vue-router。
  • 标签包含的js内容:你能够在那里些一些页面包车型大巴动态效果和Vue的逻辑代码。
  • 来声称那么些css样式只在本模板中起效率。

4858美高梅 5

4858美高梅 6

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

4.router/index.js 路由文件

引文在app.vue中我们看看了路由文件,即使router的始末比较多,不过大家先简单的看一下。下篇小说大家就起来讲Vue-router。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

4858美高梅,  

咱俩得以看来 import Hello from ‘@/components/Hello’那句话,
文件引入了/components/Hello.vue文件。那个文件里就布局了二个路由,正是当大家走访网站时给大家来得Hello.vue的始末。

ps:当然假设想行使自带的极限cmd命令行工具也是足以,不过终归没有git
bash来的好用方便。

下载成功后,输入 cnpm -v 看看是否安装成功了

  推荐上面那种

5.Hello.vue文件解读:

那些文件就是大家在率先节课看看的页面文件了。也是分为

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

  

 

安装node.js

4858美高梅 7

    3.2 安装git

1.在node.js普通话官网常规下载安装node.js就足以,没有怎么特别需求小心的点(傻瓜式安装)。

2 . 安装好 npm 上面就好办了,大家回去 Vue 官方网站看使用命令行安装步骤:
猛戳回到官网>>

          git官网下载地址:  
下载实现后开始展览安装,也是联名向下,没有索要专注的地点。安装实现,右击你的桌面空白处会油然则生三个输入。

2.在官网下载安装node.js后,就曾经自带npm(包管理工科具),不需求其它再开始展览设置npm了。

4858美高梅 8

       
  4858美高梅 9git
bash here 作者是用来下载vue-cli的模版,以及运转项目标。别的用途请自行百度。

3.小心下载node.js版本要在4.0以上,防止版本过低影响使用。

遵照地点的手续举行安装:( 以上只要是 npm 的都要改成 cnpm )

    3.3 安装 Visual Studio Code

4.打开命令行工具(随便哪个文件夹),输入指令行 node -v,npm
-v,如下图,如若出现相应的版本号,则印证安装成功。

  1. 大局安装 vue-cli $ cnpm install -g vue-cli

        这是一个编辑器,前端有很多编辑器,能够依据本人的喜好来。作者比较中意这几个的代码错误提醒:ESLint

4858美高梅 10

4858美高梅 11

       
 下载地址:

安装Tmall镜像

  1. 创制二个依照 ” webpack “的沙盘的体系 $ vue init webpack my-pro

       
 4858美高梅 12

cnpm(天猫商城镜像)相关:

4858美高梅 13

 

  1. 那是三个全部 npmjs.org 镜像,是用来一块npm上面的模块。
  2. cnpm的联合署名频率为 10分钟(新公布的模块有滞后性,同步是急需时日的,等比不上的能够选用npm)。
  3. 安装cnpm的缘由:npm的服务器是国外的,所以有时候大家设置“模块”会很不快一点也不快一流慢。
  4. cnpm的功力:Taobao镜像将npm下面的模块同步到国内服务器,升高大家设置模块的时间。
  5. 设置完天猫镜像之后,cnpm和npm命令行皆可利用,二者并不争辨

接下去会有一多重的题材:

    3.4种类搭建 

4858美高梅 14

4858美高梅 15

        vue项目自个儿动用的是webpack的模版,关于打包请自行百度。

设置情势:打开命令行工具,输入命令行:

  1. 设置重视 $ cd my-pro 切换成刚刚创设的 my-pro 目录上边

        1.首先是安装vue-cli脚手架

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

4858美高梅 16

$ npm install -g vue-cli

cnpm使用方法:

  1. 输入 $ cnpm install 下载信赖 node_module 模块 能够在目录下边看看
    node 重视模块已经下载好了。

  2.查看vue-cli的版本

$ cnpm install [name]

4858美高梅 17

$ vue -V

设置模块的时候,将npm换来cnpm就行,国内许多coder都是选拔cnpm的,个人提议我们都装一下,附上:天猫镜像网址、

  1. 到了最后一步了:输入 cnpm run dev

  那里要求小心的是,V是大写的。

安装webpack

鉴于本人一开头创办过三个品类,node 的 8080
端口被占用了,所以上面就报错了,如图:

       3.下载模板。

安装格局:打开命令行工具,输入命令行:

4858美高梅 18

$ vue init webpack my-project
npm install webpack -g

一个简练残暴的章程便是关门当前的 node 进度:

  早先化用webpack打包的品类,my-project是项目名称 会出现以下步骤。

设置成功后输入webpack -v,假使出现相应的版本号,则表达安装成功。

4858美高梅 19

4858美高梅 20

设置vue-cli脚手架创设筑工程具

最最最最最最最最最最最最最最最最最最最最最最最最最最末尾一步:

       
上面根本是项目标一部分描述和基本配置。能够依照自身下面的展开布局。那里从前遇到过难题正是开端化项指标时候,报错404

设置情势:全局安装,随便一个文本夹,输入命令行:

4858美高梅 21

4858美高梅 22

npm install vue-cli -g

上面我们打开 看看吧。终于成功了!!!

       
 那一个标题是本子难点,更换下vue-cli的本子就足以了,出现那么些题材就多试试版本
终究好事多磨嘛。版本难题一挥而就了后来,也许会产出有的别样难题,比如开首化模板的时候页面卡住。流程不走。那是因为网上有过多windows下的命令行工具,比如MobaXterm那个工具。小编事先出现过页面卡住的原由正是因为运用了那几个工具。具体原因不明。后来利用了git
bash here 消除了页面卡住的标题。

设置到位之后,输入指令行vue -V查看版本号,出现相应获得版本号即为打响:

4858美高梅 23

        4.安装正视,运转vue项目。

4858美高梅 24

PS: 记录一些限令

$ cd my-project
$ npm install
$ npm run dev

注:那里是大写的V

  1. $ cnpm install –global vue-cli

  2. $ vue init webpack-simple demo

  3. $ cd demo/

  4. $ cnpm install

  5. $ npm run dev

  那里一般不会产出难题,出现难点请自行百度。成功后会出现:4858美高梅 25

通过vue-cli,初始化vue项目

上述即是本文的全体内容,希望对大家的就学抱有援助,也盼望我们多多匡助脚本之家。

       在地点栏输入 会看到下边包车型客车页面

由此以上几步,将我们设置脚手架所急需的条件和工具都准备好好了,上边就能够动用vue-cli来伊始化项目。

你或者感兴趣的稿子:

  • vue.js单页面应用实例的简练完成
  • vue塑造单页面应用实战
  • vue中SPA单页面应用程序详解
  • 新手vue营造单页面应用实例代码
  • 在vue中落实不难页面逆传值的法门
  • 有关Vue单页面骨架屏实践记录

4858美高梅 26

1。新建2个vuetext(项目名)文件夹来放置项目,

       至此,vue项目搭建成功。上面会记录下相关技能的选取。

在新建文件夹的上超级文件夹右键打开命令行工具,输入命令行:

       笔者动用的ui框架是 element-ui
 文书档案地址:

vue init webpack vuetext1(项目名)

       仔细阅读一下文书档案,就能够上手学习了。配置都有证实,作者就不贴图了

注:项目名无法大写,不可能动用中文

       与服务器实行交互使用的是 axios vue1.0的时候官方推的是vue-resource
可是2.0官方推的是 axios 所以最棒利用axios 毕竟也要跟进时尚嘛。

解释一下这一个命令,那一个命令的意思是早先化贰个vue项目,个中webpack是创设筑工程具,约等于总体项目是依据webpack的。个中vuetext1是任何项目文件夹的名目,这几个文件夹会自动生成在你钦命的目录中。

       1.安装axios 

2。以下是脚手架安装进程(安装步骤解析在图纸下边)

$ npm install axios -S

4858美高梅 27

  2.在main.js引入

vue-cli开头化项目接纳配置详细剖析

import axios from 'axios' // 1、在这里引入axios
Vue.prototype.$http = axios;// 2、在vue中使用axios
$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
 Target directory exists. Continue? (Y/n) y--------------------找到了vuetext1这个目录是否要继续
Target directory exists. Continue? Yes
Project name (vuetext1)---------------------项目的名称(默认是文件夹的名称),ps:项目的名称不能有大写,不能有中文,否则会报错
 Project name vuetext1
Project description (A Vue.js project)---------------------项目描述,可以自己写
 Project description A Vue.js project
 Author (OBKoro1)---------------------项目创建者
 Author OBKoro1 
 Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),使用默认即可
 Vue build standalone
 Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装
 Install vue-router? Yes
 Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里个人建议选no,因为经常会各种代码报错,新手还是不安装好
 Use ESLint to lint your code? No
 Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
 Setup unit tests with Karma + Mocha? Yes
 Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
 Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd vuetext1)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目

  3.运用格局

Documentation can be found at
合法文书档案

this.$http.get().then(res => {});//这里我使用post请求报错,由于是demo 就没有去百度具体原因,有强迫症的小伙伴可以去研究下,解决问题的话 热心的小伙伴可以贴我下代码 

今后vuetext1类型现已上马开头化完成了,里面也有局地文书,但是将来还不可能得逞运行。

  4.axios 跨域难题。

3.什么运维品种

         在config目录下的index.js找到proxyTable字段,在内部添加如下代码。

  1. 进入你刚刚创制在vuetext1连串的文件夹里面,在vuetext1种类的文书夹里面右键运行git
    bash 命令行工具。
  2. 设置项目依赖。命令行: npm
    install。前边在品种开始化的时候,已经存在了package.json文件,直接动用npm
    install 安装项目所急需的注重,不然项目不能够正确运营。
'/api': {
          target:'http://localhost:8080/', // 你请求的第三方接口
          changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite:{  // 路径重写,
              '^/api': '/api'  // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
          }
      }

创建实现的“vuetext1”目录如下:

  5.axios 伸手当地数据

4858美高梅 28

       在build目录下的webpack.dev.conf.js中添加如下代码

创设落成的门类组织

//new start
const express = require('express');
const app = express();
const  appData = require('../data.json');
const  login = appData.login;
var apiRoutes = express.Router();
app.use('/api', apiRoutes);

到那里,我们已经打响应用vue-cli开头化了三个vue项目。

  依然这些js文件中,找到devServer字段,在那个字段里添加如下代码:

启航项目:

before(app) {
      app.get('/api/login', function(req, res) {
        res.json({
          errno: 0,
          data: login
        })
      });
    }

在vuetext1索引运转命令行npm run
dev,运行服务,服务运转成功后浏览器会私下认可打开3个“欢迎页面”,如下图。

  在品种根目录下创设3个data.json的公文 内容如下:

4858美高梅 29

{
    "login":{
        "ec":"0",
        "alias":"子规鱼",
        "token":"201806041953AcrqTQWECwe"
      }
}

vue-cli项目中标运维

  那是测试数据, 假如供给任何测试数据 只须要修改这些小节的首先张代码的

瞩目:那里是默许服务运转的是地面包车型大巴8080端口,所以请保管您的8080端口不被其余程序所占有,当有其他vue项目运作的时候,能够使用ctrl+c来刹车运转。

const  login = appData.login;//login为data.json中的key
app.get('/api/login', function(req, res) {//这个/api/login 根据情况替换 login 就是上面这行代码的 const 后面的常量名
        res.json({
          errno: 0,
          data: login //这个也需要改变
        })
      });
//下面这个是data.json中的数据
"login":{
        "ec":"0",
        "alias":"子规鱼",
        "token":"201806041953AcrqTQWECwe"
      }

您恐怕感兴趣的稿子:

  • 设置vue-cli报错 -4058
    的消除措施
  • 详解Vue-cli代理解决跨域难题
  • Vue-cli创造项目从单页面到多页面包车型地铁主意
  • 详解vue-cli本地环境API代理设置和消除跨域

  然后举行页面调节和测试即可。

      6.vue-router 路由

     
在报到的时候,往往需求展开登录控制,具体步骤为假诺在未曾登录情状下访问不是登录页的路由
那么就跳转登录页,那里小编遇见的难题正是登录拦截不到。废话不多说 贴代码

 

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import index from '@/views/index'
import test from '@/views/test'
Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/index',
      name: 'index',
      component: index
    },
    {
      path: '/test',
      name: 'test',
      component: test
    }
  ]
})

//登录控制
router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
     sessionStorage.removeItem('token');
  }
  let user = sessionStorage.getItem('token');
  if (!user && to.path != '/login') {
    next('login')
  }
  else {
    next()
  }
})
export default router

  在此之前尝试在main.js写控制 也正是上边那行代码 是控制不住的

//登录控制
router.beforeEach((to, from, next) => {
  //NProgress.start();
  if (to.path == '/login') {
     sessionStorage.removeItem('token');
  }
  let user = sessionStorage.getItem('token');
  if (!user && to.path != '/login') {
    next('login')
  }
  else {
    next()
  }
})

  至此停止。希望对同伴们有扶助。Good luck !

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有