vue-cli是快速构建这个单页应用的脚手架,这个可是官方的。官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack、Node.js、npm等等,很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的。一下是构建过程。

  

  1、使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了),在cmd中输入一下命令: npm install -g vue-cli

   2、安装完成后,创建自己的工作空间,在cmd切换至刚刚创建好的工作空间,如果已经有工作空间,直接切换到工作空间即可。使用命令创建项目: npm init webpack 项目名称

命令输入后,会进入安装阶段,需要用户输入一些信息:

  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

  Setup unit tests with Karma + Mocha? (Y/n)——是否安装单元测试,我选择安装

  Setup e2e tests with Nightwatch(Y/n)?——是否安装e2e测试 ,我选择安装

  完成!(一般情况,一路回车下来就好)

简单说一下这个目录:

  bulid   里面是一些操作文件,使用npm run *    时其实执行的就是这里的文件 
  config 配置文件,执行文件需要的配置信息 
  src   资源文件,所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西
  assets  资源文件夹,放图片之类的资源
  components  组件文件夹,写的所有组件都放在这个文件夹下,现在有一个写好的组件已经放到里面了
  router  路由文件夹,这个决定了也面的跳转规则
  App.vue  应用组件,所有自己写的组件,都是在这个组件之上运行了
  main.js   webpack入口文件,webpack四大特性entry入口、output输出,loader加载器,plugins插件,可以再项目中build\webpack.base.conf.js中可以看到这个入口文件是哪个
 
  安装一下模块: npm install   这里只用了install是安装所有的模块,如果是安装具体的那个模块install 后面输入模块的名字即可,只输入install就按照项目的根目录下的package.json文件中依赖的模块安装,这个文件里面是不允许有任何注释的,每个使用npm管理的项目都有这个文件,是npm操作的入口文件。因为是初始项目,还没有任何模块,需要安装所有的模块,这就是为什么我们刚下载下来别人的项目时都需要先运行 npm install 命令,因为模块较多,文件比较大,所以没有上传模块,这个不需要上传那些文件的配置是在根目录下.gitignore配置的,这是git操作的配置文件,涉及到的git操作都要操作这个文件,可以没有,也可以什么都不写。
  安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。
 
       
       运行项目: npm run dev  自动打开默认浏览器并运行默认的index.html
 
    
       至此,一个完整的vue项目框架正式搭建完成。在此基础上,我们就可以在相应的目录下修改或新建我们需要的项目了。
 
  
                 基于vue-cli快速构建
 
 
 
 
 
  
 
 

vue搭建项目前奏曲——vue-cli的更多相关文章

  1. Vue 搭建项目

    Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...

  2. vue搭建项目

    vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...

  3. 搭建项目(Vue学习笔记一)

    一.在搭建Vue项目之前首先要搞明白以下几个问题 1.Vue.js是什么 vue.js是一个脚本库. 2.webpack 模块打包机,分析项目结构,找到JavaScript模块以及其他的一些浏览器不能 ...

  4. vue搭建项目之设置axios

    首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...

  5. vue搭建项目步骤(二)

    上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...

  6. webpack+vue-cli搭建项目 (vue项目重构三)

    在自己的电脑下载了npm 与 node的情况下 可使用vue-cli快速构建vue项目执行命令如下: # 全局安装 vue-cli$ npm install -g vue-cli# 创建一个基于 &q ...

  7. 使用vue搭建项目(创建手脚架)

    第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...

  8. vue搭建项目之设置代理

    前面将项目页面.axios.组件等都准备好了,现在就差设置代理了: 首先在config下新建两个文件,分别叫做dev.uri.js和prod.uri.js,代码为: module.exports = ...

  9. 关于vue搭建项目运行出行的错误问题,简直是大坑啊

    解决方法简单粗暴,非常简单粗暴 直接在根目录新建一个test文件夹就可以搞定,用来放置配置文件的 折腾了我一上午啊

随机推荐

  1. 《JAVA程序设计》第12周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. InputStream和OutputStream为所有字节流的父类 通过操作流中的字节可处理各种不同类型的数据 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  3. Oracle存储过程 一个具体实例

    表结构信息,并不是用oracle描述的,但是后面的存储过程是针对oracle的 ----------------个人交易流水表----------------------------------- c ...

  4. 自定义BaseServlet利用反射

    比较完美一点的BaseServlet package com.yangwei.mvc.servlet; import java.io.IOException; import java.lang.ref ...

  5. 鸟哥Linux学习笔记05

    1,          文件系统通常会将 权限与属性放置到inode中,至于实际数据则放置到data block块中.另外还有一个超级块(superblock)会记录整个文件系统的整体内容,包括ino ...

  6. git记录用户名

    windows下比较比较好用的Git客户端有2种: 1. msysgit + TortoiseGit(乌龟git) 2. GitHub for Windows github的windows版也用过一段 ...

  7. JavaSE(十二)之IO流的字节流(一)

    前面我们学习的了多线程,今天开始要学习IO流了,java中IO流的知识非常重要.但是其实并不难,因为他们都有固定的套路. 一.流的概念     流是个抽象的概念,是对输入输出设备的抽象,Java程序中 ...

  8. 微信开发(2)–获取access_token

    一.access_token access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保 ...

  9. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  10. 原型模式和基于原型继承的js对象系统

    像同样基于原型编程的Io语言一样,javascript在原型继承方面,实现原理和Io非常类似,javascript也遵守这些原则 所有数据都是对象 要得到一个对象,不是通过实例化类,而是找到一个对象作 ...