使用nodejs创建Vue项目

╰半夏微凉° 2023-02-14 10:58 3阅读 0赞

### 使用nodejs创建Vue项目 ###

*  nodejs
 *   *  安装
     *  验证安装成功
     *  更换淘宝镜像
     *  全局安装 vue-cli
     *  创建

# nodejs #

## 安装 ##

nodejs安装 [ https://nodejs.org/en/][https_nodejs.org_en].  
![选择版本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw_size_16_color_FFFFFF_t_70]

## 验证安装成功 ##

![验证][20200602195314205.png]

## 更换淘宝镜像 ##

npm使用的是国外的镜像，可能会出现很慢的情况，网上都推荐使用淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

## 全局安装 vue-cli ##

cnpm install -g vue-cli

## 创建 ##

切换到新建的空目标目录下

vue init webpack

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw_size_16_color_FFFFFF_t_70 1]

Project name (earn-money) # 项目名称（我的项目）
    
    Project description (I want to make money) # 项目描述一个Vue.js 项目
    
    Author 作者（你的名字）
    
    Vue build 
     --Runtime + Compiler: recommended for most users
     运行时+编译器：推荐给大多数用户
     --Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
     仅限运行时：min + gzip轻约6KB，但.vue文件中仅允许使用模板（或任何Vue特定的HTML）-其他地方需要渲染功能
    
    Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
    
    Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
    
    set up unit tests? (Y/n) # 设置单元测？ （Y/ N）
    
    Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）

结束后运行：

cnpm/npm install
    cnpm/npm run dev

cnpm/npm run dev运行完后会生成：  
![application][]  
在浏览器输入对应的地址即可

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602194806947.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw==,size_16,color_FFFFFF,t_70
[20200602195314205.png]: https://img-blog.csdnimg.cn/20200602195314205.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602203403146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0OTE0Mw==,size_16,color_FFFFFF,t_70
[application]: https://img-blog.csdnimg.cn/20200602205149250.png