安装vue

1，npm install vue

安装完成可通过 vue -V来查看是否安装了vue，以及vue的版本号
2，npm install -g cnpm --registry=https://registry.npm.taobao.org
对于中国大陆用户，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。

安装vue-cli

1，npm install -g @vue/cli

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

安装之后通过vue --version来验证是否安装成功
卸载脚手架重新安装 npm uninstall vue-cli -g
升级全局的vue-cli包 npm update -g @vue/cli
上面列出的命令是用于升级全局的vue cli，如需升级项目中的vue cli，请在项目目录下运行 vue upgrade

创建一个项目

1，vue create hello-world
2，选默认的包含了基本的 Babel + ESLint 设置的 preset，这个默认的设置非常适合快速创建一个新项目的原型

修改babel.config.js

module.exports = {presets: [['@vue/app', {polyfills: ['es.promise','es.symbol']}]]
}

预处理器

安装 Sass

npm install -D sass-loader sass

安装Less

npm install -D less-loader less

安装stylus

npm install -D stylus-loader stylus

在项目中.vue文件中使用

<style lang="scss">
$color: red;
</style>

小tips:npm 安装时 -D，即–dev（开发），包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用，如Babel，sass-loader这些解析器。

安装webpack

//全局安装
npm install webpack -g
//or 项目根目录中安装
npm install webpack --save-dev

webpack（网页包）相关简单的配置方式

vue.config.js 中的 configureWebpack 选项提供一个对象：

module.exports={configureWebpack:{plugins:[new MyAwesomeWebpackPlugin()]}
}

有些webpack选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的outputDir(输出目录)选项而不是修改output.path；你应该修改 vue.config.js 中的publicPath 选项而不是修改 output.pablicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

module.exports={configWebpack:config=>{if(process.env.NODE_ENV==='production'){//为生产环境修改配置...}else{//为开发环境修改配置...}}
}

cd[/d][X:]进某个路径，存放我们要建的项目，否则会默认路径建项目

vue init webpack "项目名称"

等项目初始化完以后cd进所在的目录

cd '项目所在文件夹'

运行项目

npm run dev

创建一个vue-cli项目到运行的完整流程相关推荐

创建一个rails入门项目并运行
创建第一个rails项目从java转到ruby,正在学习中,创建第一个rails项目,做一些记录首先要检查一下前置条件检查是否安装ruby:ruby --version 我这里是已经安装了. 检 ...
创建一个vue脚手架项目
首先 ,创建脚手架需要安装vue-cli 安装vue-cli就需要npm 所以第一步需要安装Node.js 安装好后,查看版本之后在想要放项目的地方cmd ,安装脚手架 npm install -g ...
安装Vue node 及创建一个Vue 项目
安装Vue 和 node 及创建一个Vue 项目一下载node.js安装包 1 下载资源包,然后安装 2 点击以上的Run(运行),将出现如下界面,然后一直点击Next 直达安装完成 3 检测P ...
vue怎么运行html,怎样运行一个vue.js项目
怎样运行一个vue.js项目? 下载并安装node,安装过程很简单,一路"下一步"就可以了,安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明 ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
从零开始，创建一个VUE项目，详细图文详解。
准备工作 1.安装VScode 点击下载 2.安装node 点击下载 3.安装npm 点击下载一.步骤详解 1.创建项目的文件夹.比如F盘下新建一个名为MyDemo的文件夹,打开VScode进入My ...
使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目实例交流前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建 ...
如何创建一个vue项目
首先要准备好node.js npm,vue-cli 创建一个vue项目,使用脚手架创建具体命令如下 vue init webpack 项目名称然后回车 Project name 项目名称 ( ...
从零开始创建一个vue项目 1
从零开始创建一个vue项目创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...

创建一个vue-cli项目到运行的完整流程

创建一个新的vue项目进行开发的完整流程