vue cli 项目创建

初始化项目

我们用vue init命令来初始化项目,具体看一下这条命令的使用方法。

$ vue init <template-name> <project-name>
$ vue init <template-name> <project-name>
init:表示我要用vue-cli来初始化项目

<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板,

webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。

webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。

browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。

browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。

simple-一个最简单的单页应用模板。

<project-name>:标识项目名称,这个你可以根据自己的项目来起名字。

在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:

vue init webpack vuecliTest

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。
结束后,
1、cd vuecliTest 进入我们的vue项目目录。

2、npm install 安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。

3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

原文地址:https://www.cnblogs.com/wilsunson/p/9438534.html

时间: 2024-08-10 03:24:41

vue cli 项目创建的相关文章

vue cli 项目的提交

前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 git init 将项目所有文件(未被ignore)添加到仓库 git add . 将add文件提交到本地仓库 git commit -m '提交信息' 本地仓库关联远程git仓库 git remote add origin git仓库 本地仓库代码提交到服务器 git push -u origi

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

vue cli中环境变量和模式

环境变量配置 环境变量可以在以下文件中配置: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略 (.local优先于.env生效) 文件内部使用键值对的方式对变量进行配置 被载入的变量将会对 vue-cli-service 的所有命令.插件和依赖可用,同时为一个特定模式准备的环境文件的 (例如 .env.

npm 在安装 Vue脚手架命令(npm install -g @vue/cli)时报错安装报错--“Unexpected end of JSON input while parsing near&#183;&#183;&#183;”

在安装Vue的脚手架(npm install -g @vue/cli 项目名称)时,提示: Unexpected end of JSON input while parsing near 其实,但凡使用npm 时,只要提示这个,都可以按照以下几种方式进行尝试. 第一种:删掉package.lock.json 第二种:清除cache npm cache clean --force第三种:进入下面这个文件夹,把文件夹npm-cache下的内容删除掉(清除cache) 路径:C:/Users/DELL

新手入门vue 使用vue-cli创建项目

本文是针对对于完全没有了解过vue 和npm,连运行环境和项目构建的都不会的小白,对于前端老司机的就不用看了,浪费时间. 使用npm 与vue-cli 构建vue 项目 第一步:安装运行环境(node与npm) nodeJ官网:http://nodejs.cn/ 下载安装包( 安装) 安装完成后,需要检测是否安装成功 使用命令行cmd  打开dos 黑窗口,运行 node  -v 和 npm –v,出现版号说明安装成功 注(npm 是node自带的,在安装node时已经安装了) 如何升级npm

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

VUE CLI3.X 创建项目

Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多个Node版本 nvm github地址:https://github.com/nvm-sh/nvm Vue CLI 3.0环境搭建 卸载老版本vue-cli:npm uninstall vue-cli -g 安装新版本:npm install -g @vue/cli 原型开发:npm instal

Vue学习手记01-安装和项目创建

1.安装Vue  注:node版本必须大于等于8.9  vue-cli3.x:npm install -g @vue/cli  vue-cli2.x:npm install -g @vue/cli-init 2.创建项目  vue init webpack my-project  注:安装依赖的时候,选择最后一个,就是自己安装,检验和路由初学者一般不安装,后面学习的时候再安装到项目  cd my-project  npm start/npm run dev 3.工程目录说明 . ├── buil