新手学习VUE——环境搭建及创建项目

小鱼儿 2021-05-12 11:55 565阅读 0赞

### **第一种方式：** ###

**1、下载安装node.js，检查是否成功：**

node-v  # 或 npm-v

**2、搭建项目：**

2.1、第一种方法：用iview脚手架建项目

打开iview官网==>生态 ===>iview cli==>进行下载iview脚手架，

下载后进行创建项目

2.2、第二种方法：命令行进行创建

2.2.1、全局安装vue-cli

npm install -gvue-cli

2.2.2、全局安装webpack

npm install -g webpack

2.2.3、安装webpack的本地webserver

npm install -gwebpack-dev-server

2.2.4、下载iveiw组件库

npm install --save iview

2.2.5、下载axios

npm install axios    npminstall --save vue-axios

2.2.6、下载饿了么组件库

cnpm install element-ui --save

2.2.7、搭建项目（你想把项目发到那，就切换到那块下载）

vue initwebpack  项目名称

![70][]

**3、切换到你所在的项目，运行项目**

npm run dev

**4、编辑项目时，我建议用HBuilder**

**5、下载好后，项目如下图所示：**

![70 1][]

**6、比较关心的的几个文件：**

*      src下的assets：存放静态文件；
 *      src下的components：写页面；
 *      src下的router下的index.js：配置路由；
 *      src下的main.js：前端的主入口，主要是写配置。

**注意：**对于新引进来的东西，需要在index.js和main.js下引用才方可使用。

**7、如果觉得npm速度不快，可下载cnpm**

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

### **第二种方式：** ###

**1、检测是否安装好nodejs和npm，检测命令   **

node -v
    
    npm -v

如果没有安装需要先安装

nodejs的下载路径：[https://nodejs.org/en/download/][https_nodejs.org_en_download]

在Windows上安装时务必选择全部组件，包括勾选Add toPath。安装完成后，在Windows环境下，请打开命令提示符，然后输入node -v，如果安装正常，你应该看到  版本号输出。

![20181212104522361.png][]

npm是Node.js的包管理工具（package manager），Nodejs的安装程序默认安装npm，在命令提示符或者终端输入npm -v，可以看到类似以下的输出：

![20181212104555932.png][]

在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：

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

即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了，如果权限不够，请使用管理员运行命令提示符安装淘宝npm镜像。

**2.安装vue-cli，vue脚手架**

cnpm i -g vue-cli

测试是否安装成功：

vue -V

**3、项目安装和创建**

3.1、安装项目

首先进入工作目录（如果不在工作目录），使用cd 命令，进入工作目录，使用脚手架安装项目：

vue init webpack first_vue

控制台显示：

提示目录已存在，是否继续：Y
    
    Project name（工程名）:回车
    
    Project description（工程介绍）：回车
    
    Author：作者名
    
    Vue build（是否安装编译器）:回车
    
    Install vue-router（是否安装Vue路由）：回车
    
    Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
    
    Set up unit tests（安装测试工具）：n
    
    Setup e2e tests with Nightwatch（测试相关）：n
    
    Should we run `npm install` for you after the project hasbeen created? (recommended)：选择：No, I will handle thatmyself

3.2、初始化项目

进入项目目录

cd firstVue

初始化项目

cnpm i

运行项目

cnpm run dev

3.3、安装vue-router

cnpm i vue-router

浏览器打开：[localhost:8080][localhost_8080]，即可打开vue项目

Ctrl+C退出运行

**4、配置idea**

*  File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认；
 *  File - Settings - Plugins：搜索vue，安装Vue.js；
 *  Run - Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了；
 *  继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。

**5、安装使用stylus（是一种健壮的css）**

cnpm install --save-dev stylus stylus-loader

[70]: /images/20210511/ad72c2b10f1a43e28f4aeef7eec0d8d3.png
[70 1]: /images/20210511/00a2f11b983147a5a551328b70fdbcb6.png
[https_nodejs.org_en_download]: https://link.jianshu.com?t=https%3A%2F%2Fnodejs.org%2Fen%2Fdownload%2F
[20181212104522361.png]: /images/20210511/b8a0a3cb61a348de960803beabeee3e4.png
[20181212104555932.png]: /images/20210511/790468c4838f49cd9e280b79ce794d65.png
[localhost_8080]: https://link.jianshu.com?t=http%3A%2F%2Flocalhost%3A8080