整体架构:
此处npm安装过于缓慢,因此使用的是淘宝的镜像cnpm

vue+webpack 初始化项目:
1、安装vue: cnpm install vue
  检验版本: vue -V
2、创建一个vue项目:
  全局安装vue-cli: cnpm install -g vue-cli
  创建一个基于webpack模板的新项目: vue init webpack new-project

  输入上面的命令后,下面的问题根据需要填写就可以了
  Project name :项目名称,如果不需要就直接回车。注:此处项目名不能使用大写。
  Project description:项目描述,直接回车
  Author :作者
  vue build 构建方式(暂且这么解释)
  两个选择(上下箭头选择,回车即为选定)
  1.Runtime + Compiler:recommended for most users
    (译:运行+编译:被推荐给大多数用户)
  2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
    allowed in .vue files-render functions are required elsewhere
    (译:只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈现函数。翻译不精准,意思大概是选择该构建方式对文件大小有要求)
    这里推荐使用1选项,适合大多数用户的
    install vue-router?是否安装vue的路由插件,需要就选y,否则就n(以下均遵循此方法)
    Use ESLint to lint your code?是否使用ESLint检测你的代码?
  (ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。)
  Pick an ESLint preset:选择分支风格
  选项有三个
  1.standard(https://github.com/feross/standard) js的标准风格
  2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说是JavaScript最合理的方法
  3.none (configure it yourself) 自己配置
  Setup unit tests? 是否安装单元测试(暂不详细介绍)
  Pick a test runner 选择一个单元测试运行器
  选项有三个
  1.Jest(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)
  2.Karma and Mocha
  3.none
  Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”。)
  Should we run 'npm install' for you after the project has been created?(译:项目创建后是否要为你运行“npm install”?这里选择包管理工具)
  选项有三个
  yes,use npm(使用npm)
  yes,use yarn(使用yarn)
  no,I will handle that myself(自己操作)
  一路回车到此等待安装完毕,会提示接下来的命令行
  ......
3、安装依赖:
  cd new-project
  cnpm install
4、启动: cnpm run dev

5、这个只能在本地跑,如果要在服务器上访问,需要执行: cnpm run build

代码总结如下:
cnpm install vue
cnpm install -g vue-cli
vue init webpack new-project
cd new-project
cnpm install
cnpm run dev

vue_webpack初始化项目的更多相关文章

  1. 使用node初始化项目

    初始化项目 在建项目的时候经常会建很多文件夹和文件,今天使用node初始化项目自动生成这些内容. 执行步骤 执行命令 node init 初始化项目生成package.json 设置配置文件 var ...

  2. vue初始化项目,构建vuex的后台管理项目架子

    构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...

  3. Git帮助之初始化项目设置向导

    初始化项目设置向导 Git设置: git config --global user.name "Your Name Here" # 设置Git提交时的默认用户名,推荐使用本站用户名 ...

  4. 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...

  5. react native初始化项目

    打开命令行窗口,进入我们想要创建项目的父目录,输入命令: npm install -g yarn react-native-cli react-native init 项目名 进入新建的项目目录,执行 ...

  6. git初始化项目 以及 git常用操作

    初始化项目 $ git config --global user.name "Your Name"  配置用户名 $ git config --global user.email ...

  7. Git 初始化项目、创建合并分支、回滚等常用方法总结

    就在刚才查看资料时候, 看见一句话, 写的特别好: 当我的才华撑不起我的梦想的时候, 应该安静下来学习 配上我最喜欢动漫的一个角色: 红莲 1. Git 初始化项目 1). 创建新的知识库 echo ...

  8. 初探angluar_01 目录结构分析及初始化项目

    简单说明:angular是模块化的,因此所有功能功能都属于组件 一.目录结构 e2e 端到端的测试目录  用来做自动测试的 node_modules 安装地依赖存放目录,package.json里安装 ...

  9. React Native 0.56.1初始化项目运行出现错误(Module `AccessibilityInfo` does not exist in the Haste module map)

    当使用react-native init myApp初始化项目时,出现以下错误 出现以上错误的原因是因为0.56.1版本初始化项目就有问题,请见 https://github.com/facebook ...

随机推荐

  1. CNN:卷积输出分辨率计算

    卷积是CNN非常核心的操作,CNN主要就是通过卷积来实现特征提取的,在卷积操作的计算中会设计到几个概念:步长(strides).补充(padding).卷积核(kernel)等,那卷积的输出分辨率计算 ...

  2. java常用第三方类库

    Guava:来自Google的常用类库 Apache Commons:来自Apache的常用类库 Mockito:主要用于单元测试的mock DBUnit:测试中管理数据库测试数据 Rest Assu ...

  3. OSS 图片处理流程

    1.步骤一 2.步骤二 3.步骤三 4.步骤四 5.步骤五(步骤4完成会自动添加cname用户解析,不需要自己去加,只需要点击进来看下是否添加成功即可) 通过以上步骤就可以实现了图片服务的配置

  4. SQL基础教程(第2版)第5章 复杂查询:5-1 视图和表

    本章将以此前学过的SELECT语句,以及嵌套在SELECT语句中的视图和子查询等技术为中心进行学习.由于视图和子查询可以像表一样进行使用,因此如果能恰当地使用这些技术,就可以写出更加灵活的 SQL 了 ...

  5. SEO初步学习之影响网站排名的因素

    本文介绍一些比较明显的因素,一些隐藏较深的原因还有待发掘: 1.采集网站内容,即抄袭其他网站的内容. 2.新站上传后建议不要有大的改动. 3.标题频繁修改. 4.大量投放垃圾外链. 5.不做友链,交友 ...

  6. GitHub的学习和使用

    大二寒假阶段: 今天初学了GitHub,并下载了git base,在如下大佬给的链接下并完成了新用户的注册以及项目的上传学习. 网站的新用户注册界面:                https://g ...

  7. Luogu P3031 高于中位数

    定义序列\(x_i = f([H_i >=x])\;\;\;\;其中f(0) = -1,f(1) = 1\),那么区间[i,j]满足条件当且仅当sum_j-sum_{i-1} > 0,即s ...

  8. 18 11 07 pygame 继续使用

    ---恢复内容开始--- 1  给原来的游戏不定时  增加一些敌机  用到了pygame的定时器    定时器就是每隔一段时间  就进行一次相同的操作 2 pyagame 在捕获键盘操作有两种 1  ...

  9. Python列表中去重的多种方法

    怎么快速的对列表进行去重呢,去重之后原来的顺序会不会改变呢? 去重之后顺序会改变 set去重 列表去重改变原列表的顺序了 l1 = [1,4,4,2,3,4,5,6,1] l2 = list(set( ...

  10. 产品对话 | 愿云原生不再只有Kubernete

    从2013年,云原生(Cloud Native)的概念由 Pivotal 的 MattStine 首次提出,到现在,其技术细节不断得到社区的完善.云原生逐渐演变出包括 DevOps.持续交付.微服务. ...