后端程序员学习前端开发之第一步环境搭建

我就是我 2024-03-26 16:03 58阅读 0赞

## 一、安装 Node.js ##

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。[Node.js官网][Node.js]

## 二、安装 npm 镜像 ##

因为 npm 是国外的，所以使用起来速度比较慢。我们这里使用了淘宝的 cnpm 镜像安装 vue。使用淘宝的 cnpm 命令管理工具代替默认的 npm 管理工具。  
进入cmd 输入命令： npm install -g cnpm --registry=https://registry.npm.taobao.org

## 三、安装全局 vue-cli 脚手架 ##

npm 镜像安装完成之后，接下来安装全局 vue-cli 脚手架。  
进入 cmd，输入命令：cnpm install --global vue-cli 然后回车。

以上步骤全部完成后可以使用 vue 命令测试一下，出现如下结果为安装正常

PS E:\IdeaProjects\Reid\前端> vue
    Usage: vue <command> [options]
    
    Options:
      -V, --version  output the version number
      -h, --help     output usage information
    
    Commands:
      init           generate a new project from a template
      list           list available official templates
      build          prototype a new project
      create         (for v3 warning only)
      help [cmd]     display help for [cmd]

如果执行 vue 命令报错：vue : 无法加载文件C:\\Users\\xxx\\AppData\\Roaming\\npm\\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170

解决方法：

1、以管理员身份运行 PowerShell
    2、执行：get-ExecutionPolicy，回复 Restricted，表示状态是禁止的
    3、执行：set-ExecutionPolicy RemoteSigned
    4、选择：Y

## 四、创建项目 ##

可以使用 vue create 项目名称 或 vue init webpack 项目名称 进行项目创建。

vue create 和 vue init webpack 的区别？
    1、vue create：vue -cli3.x 版本的初始方式 ，启动方式默认为 npm run serve
    2、vue init webpack : vue -cli2.x 版本的初始化方式，启动方式默认为 npm run dev ，webpack 为官方推荐模板

## 五、安装项目依赖 ##

可以使用开发工具一键安装或者命令方式进入项目根目录使用命令 cnpm install 安装项目依赖环境即可。

## 六、运行项目 ##

可以使用开发工具一键启动或者参考第四步按照创建项目方式进行启动即可。

[Node.js]: https://nodejs.org/zh-cn/