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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

以上是 一、搭建前端开发环境（Vue+element) 的全部内容， 来源链接： utcz.com/z/380395.html

回到顶部