zoukankan      html  css  js  c++  java
  • 利用官方的vue-cli脚手架来搭建Vue集成开发环境

    在利用vue-cli脚手架搭建vue集成环境之前,我们需要先安装nodejs的环境。如果在cmd中输入node --version和npm --version出现如下的版本信息,就说明安装已经成功了。

    1.全局安装 vue-cli:  npm install --global vue-cli

     
    (我这边是以前就已经安装好了,所以这边显示的是更新)
     
    2.创建一个基于 webpack 模板的新项目(本地文件下面生成项目的):vue init webpack myvue
     
    如果速度特别慢的话,可以考虑用国内阿里的源码。命令如下:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
     
    关于这些选项的含义可以参考这篇博客的内容:https://www.jianshu.com/p/2769efeaa10a
    我具体摘抄出来给大家解释一下:
    vue init webpack vuetest
    Test是项目名称,这个名字自己随便取。
    命令输入后,会进入安装阶段,需要用户输入一些信息
    Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
    Project description (A Vue.js project) 项目描述,也可直接点击回车,使用默认名字
    Author (........) 作者,不用说了,你想输什么就输什么吧
    接下来会让用户选择
    Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
    Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,不过我的第一个项目中的路由是自己写的,没有使用到官方路由,因为有特殊需求,也因为比较早,官方尚未成熟,vue-router官网 。这里就输入“y”后回车即可。
    Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,一般项目中都会使用。ESLint官网
    接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint
    Standard (https://github.com/feross/standard) 标准,有些看不明白,什么标准呢,去给提示的standardgithub地址看一下, 原来时js的标准风格
    AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法
    none (configure it yourself) 这个不用说,自己定义风格
    具体选择哪个因人而异吧 ,我选择标准风格
    Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择安装
    Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择安装
     
     
    3.进入webpack项目中更新工程依赖,因为现在前端项目会有很多依赖:npm install
     
    (这边需要注意的是:命令框得是由管理员启动的才可以!!!)
    4.运行webpack项目:npm run dev
     
    5.webpack项目打包:npm run build .
     
     
     
    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    LSMW TIPS
    Schedule agreement and Delfor
    Running VL10 in the background 13 Oct
    analyse idoc by creation date
    New Journey Prepare
    EDI error
    CBSN NEWS
    Listen and Write 18th Feb 2019
    Microsoft iSCSI Software Target 快照管理
    通过 Microsoft iSCSI Software Target 提供存储服务
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/9679095.html
Copyright © 2011-2022 走看看