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. 201521123111《Java程序设计》第13周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.bai ...

  2. chrome保存网页为单个文件(mht格式)

    网页归档(英语:MIME HTML或MIME Encapsulation of Aggregate HTML Documents,又称单一文件网页或网页封存盘案)为以多用途互联网邮件扩展格式,将一个多 ...

  3. JavaScript随笔

    文档模式 主要模式2中混杂模式和标准模式. 1混杂模式,混杂模式会让IE的行为与(包含非标准特性的)IE5相同. 2标准模式,标准模式让IE的行为更接近标准行为. 准标准模式:通过过渡型或框架集型触发 ...

  4. C#参数详解

    参数 可选参数与命名参数 设计方法时,我们可以为部分参数设置默认值,在方法调用时就可以不提供该参数,使用其默认值.此外,调用方法时可以通过指定参数名的方式来传递参数.话不多说,请看以下示例: stat ...

  5. mybatis 自动生成代码(mybatis generator)

    pom.xml 文件配置 引入 mybatis generator <properties> <mysql.connector.version>5.1.44</mysql ...

  6. (二)Java数组特性总结,你真的了解数组吗?

    一.数组的特殊性 (一)数组标识符是一个引用,指向堆中创建的一个真实对象,这个对象(数组)保存了指向保存其他对象的引用. (二)数组中保存引用类型时保存的是对象引用,基本数据类型数组保存基本数据的值. ...

  7. oracle安装时,条件检查不通过解决办法

    1.开始菜单→ 运行:输入regedit,打开注册表 2.依次点开HKEY_LOCAL_MACHINE>>SYSTEM>>CurrenControlSet>>ser ...

  8. Maven(五)之Maven配置阿里云镜像飞快下jar包

    用过Maven的人都知道Maven对于依赖的管理让我们程序员从此远离了自己去在项目中把需要的jar包导入到项目中,但是因为中央仓库是在国外的,所以在我们从中央仓库下载依赖的时候, 我们发现下载速度真的 ...

  9. 匹配替换第n个字符串

    var name = "questions[0][question]",i=0; name.replace(/\[.+?\]/g, function(match, pos, ori ...

  10. 分享一个图片上传插件(TP5.0)

    效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间.一.下载附件 地址:https://pan.baidu.com/s/1bpxZhM3 ...