一、搭建前端开发环境(Vue+element)

1.Visual Studio Code

下载地址:https://code.visualstudio.com/

更多VS Code教程可以参考以下资料:

官网文档:https://code.visualstudio.com/docs

简书教程:https://www.jianshu.com/p/990b19834896

2.Node JS

安装NodeJS:http://nodejs.cn/download/

把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,显示版本就成功了。

如果你安装的是旧版本的npm,可以很容易地通过npm命令来升级:

# linux系统命令
sudo npm install npm -g
# windows 系统命令
npm install npm –g

更多NodeJS教程可以参考一下资料:

中文官网:http://nodejs.cn/api/

菜鸟学堂:https://www.runoob.com/nodejs/nodejs-tutorial.html

3.淘宝镜像

安装淘宝镜像,安装成功后用cnpm替代npm命令即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装Yarn

Yarn是Facebook发布的node.js包管理器,比npm更快更高效,可以使用Yarn替代npm。

npm i yarn -g -verbose

配置淘宝镜像:

yarn config set registry https://registry.npm.taobao.org

配置node-sass 的二进制包镜像地址:

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn的具体使用可参考:https://blog.csdn.net/idomyway/article/details/88411836

还有yarn命令中-dev亲测无效,要改为-d。

5.安装webpack

安装打包工具webpack:

npm install webpack -g
更多

webpack教程可以参考以下资料:

菜鸟学堂:http://www.runoob.com/w2cnote/webpack-tutorial.html

全局安装后直接在cmd输入webpack -v,即可查看webpack版本。

6.安装vue-cli

安装 vue脚手架项目初始化工具vue-cli:

npm install vue-cli –g

vue-cli可视化创建项目流程:

可参考:https://www.baidu.com/link?url=foYJ1HnXI3NEBItAIg51_RGMRD6vzZRNqndSmtiJielN68ghlHjYBM1KmYAk0Oxs9bOlcLZjVAbKMlouuUAndK&wd=&eqid=af9268890003796a000000055e73175d

7.创建项目

环境已经搭建完成,现在我们通过vue-cli来生成一个项目:

vue init webpack 项目名

安装过程有这些提示:

Install vue-router?y
Use ESLint to lint your code? (Y/n) n
Set up unit tests (Y/n)n
Setup e2e tests with Nightwatch? (Y/n)n

ESLint在Vue中的使用详解:可参考:https://blog.csdn.net/IT_HLM/article/details/78776630

setup e2e tests with nightwacth的使用,可参考:https://blog.csdn.net/fangfangtulk/article/details/89290074

8.安装依赖

安装依赖要在项目本身的根目录里安装,即cd进项目目录。

9.启动运行

npm run dev

猜你喜欢

转载自www.cnblogs.com/xc-xinxue/p/12524394.html