vue项目的搭建

Love The Way You Lie 2023-07-20 12:15 19阅读 0赞

# 一、node环境的搭建 #

下载地址为：[https://nodejs.org/en/][https_nodejs.org_en]

查看电脑是否安装了node ， npm , cnpm

检查是否安装成功：如果输出版本号，说明我们安装node环境成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 1][]

cnpm的安装方法：（使用淘宝的镜像：[http://npm.taobao.org/][http_npm.taobao.org]）

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

即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

# 二、搭建Vue项目环境 #

1、全局安装vue-cli

npm install --global vue-cli

![20200401152707451.png][]

创建一个基于 webpack 模板的新项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 2][]

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

安装完

![20200401153727491.png][]

# 三、安装依赖和项目启动 #

项目初始化成功后，会提示我们cd demo

我们先执行cd demo ,进入到我们刚刚创建的这个项目中

![20200401153918874.png][]

安装依赖，可以执行npm install 或者 npm i.

这里我们执行cnpm install 或者 cnpm i ，这样使用cnpm会安装稍微快些。

执行命令后，我们会发现我们的项目文件中多了node\_modules文件夹。

![20200401154159645.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 3][]

现在，我们就可以启动项目了。

在控制台输入 npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 4][]

在我们的浏览器打开 http://localhost:8080

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 5][]

# 四、项目目录的讲解 #

1、build：构建脚本目录

1）build.js   ==>  生产环境构建脚本；

2）check-versions.js   ==>  检查npm，node.js版本；

3）utils.js   ==>  构建相关工具方法；

4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js   ==>  webpack基本配置；

6）webpack.dev.conf.js   ==>  webpack开发环境配置；

7）webpack.prod.conf.js   ==>  webpack生产环境配置；

2、config：项目配置

1）dev.env.js   ==>  开发环境变量；

2）index.js   ==>  项目配置文件；

3）prod.env.js   ==>  生产环境变量；

3、node\_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

# 五、我们来尝试一下创建页面 #

用VS code（当然你也可以根据个人喜好，选择适合自己的编辑器）打开我们的项目。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 6][]

创建后，我们在这2个页面中编辑内容，在vue里面都是基于组件来开发的，这里template 写 html，script写 js，style写样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 8][]

创建完页面基本内容后，我们要想通过url来访问我们刚刚创建的页面，这时我们需要用到之前安装的vue-router。

在项目中的router文件夹中的index.js文件来配置路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 9][]

在url中输入 [http://localhost:8080/\#/first][http_localhost_8080_first] 即可访问到我们创建的第一个页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 10][]

同理，第二个页面也可以通过url去访问。

现在我们使用<router-link></router-link>的标签来实现页面间的切换。

在第一个页面中添加下面代码。

![20200401160758739.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 11][]

点击跳转到第二个页面，即可实现页面间跳转。

同理，我们也在第二个页面中添加一下代码，实现2个页面相互跳转。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 13][]

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200401152231503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 1]: /images/20230528/2d99174798ba459e9181852445fde420.png
[http_npm.taobao.org]: http://npm.taobao.org/
[20200401152707451.png]: /images/20230528/e5d0007ad3c545f8ad6f563d0072943d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 2]: /images/20230528/6110a04019674ab880482941ba9dd32e.png
[20200401153727491.png]: /images/20230528/e4b205b88b8a4f1b951841b12e00d56c.png
[20200401153918874.png]: /images/20230528/8b0012c05ee94a99b730013dba0e0f17.png
[20200401154159645.png]: /images/20230528/5067eb5c9fd64bce83a6066d08842ee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 3]: /images/20230528/735bca64ac834dfcb35965bdcba3431f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 4]: /images/20230528/a4c7792cf4f34f20a97e7330161c1e02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 5]: /images/20230528/a990c4b742694a4a870893a08108928b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 6]: /images/20230528/bb20b024d37b4e32adc0ff9b353f846a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 7]: /images/20230528/11d57a1d579243b89d4d9cd94c0365b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 8]: /images/20230528/7fc4ad90d2d14262b5c290a02010e0af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 9]: /images/20230528/d138c172e0ea425585f11c87a0e422ca.png
[http_localhost_8080_first]: http://localhost:8080/#/first
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 10]: /images/20230528/56099047e3f74c689cb210624e8b110f.png
[20200401160758739.png]: /images/20230528/45cea8bc13ec4f83969027f06ae62588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 11]: /images/20230528/aa1f8f1200d5446089ea2f46ff950477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 12]: /images/20230528/56ba284be0bc4a7993f3ecff0f8b09db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk4NjcyNg_size_16_color_FFFFFF_t_70 13]: /images/20230528/38d87ffefd07490caec51f2ad145e582.png