Vue 环境搭建

Posted geduocoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 环境搭建相关的知识,希望对你有一定的参考价值。

Vue环境安装

1.node js 安装

https://nodejs.org/en/

node -v

配置环境变量
NODE_HOME=D:\Program Files\nodejs

%NODE_HOME%\;
%NODE_HOME%\node_modules;
%NODE_HOME%\node_global_modules;


2.npm 安装

npm install npm -g

npm -v

cnpm install npm -g

npm config ls

npm config set registry http://registry.cnpmjs.org

npm config set prefix "D:\Program Files\nodejs\node_global_modules"

npm config set cache "D:\Program Files\nodejs\node_cache"

3.webpack 安装

npm install webpack webpack-cli -g
npm install webpack webpack -g

4.vue-cli 安装

npm install vue-cli -g

vue init webpack demo

cd demo

npm run dev

npm run build

5.安装babel

npm install -g babel-cli

npm install babel-preset-es2015 babel-cli --save-dev

npm install babel-loader --save-dev

npm install babel-core --save-dev

 

#npm run compile

https://segmentfault.com/a/1190000008899254

npm init -yes

6.安装 gulp (抛弃,用webpack替代)

npm install -g gulp

npm install gulp -save-dev

7.安装webpack

npm install -g webpack

npm install webpack-cli -g 

npm install webpack webpack-cli -save-dev

 

#CSS

npm install style-loader --save-dev
npm install css-loader --save-dev

#html
npm install html-webpack-plugin --save-dev

 

npm install babel-loader @babel/core @babel/preset-env -D

#热更新
npm install webpack-dev-sever --save-dev

webpack --mode development

 

npm install --save axios vue-axios

以上是关于Vue 环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

Vue-搭建环境

Vue开发环境的搭建

Vue环境搭建和项目创建

vue环境搭建

vue环境搭建后,简单的单页面切换详细步骤,代码的放置在啥地方

Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期