webpack+vue搭建编写（一）

浅浅的花香味﹌ 2023-06-15 09:47 44阅读 0赞

[https://blog.csdn.net/woyizhizaizhaoni/article/details/103083615][https_blog.csdn.net_woyizhizaizhaoni_article_details_103083615]

每次搭建项目都是最费劲的，网上各种找，各种好使不好使的都有，哎~~~，还是自己记录的比较便于过后查看翻阅

根据上面的在安装完nodejs后配置好

# 快速原型开发： #

打开cmd->进入一个你创建好的要搭建前台的项目文件夹下

C:\Windows\system32>E:              --输入磁盘直接进入磁盘
    
    E:\>cd program\vueDemo              --cd 进入对应的文件夹下
    
    E:\program\vueDemo>npm init -y      --项目 npm 首次初始化
    Wrote to E:\program\vueDemo\package.json:
    
    {
      "name": "vueDemo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
    
    
    E:\program\vueDemo>npm install webpack webpack-cli --save-dev   --安装webpack-cli
    [ .................] | fetchMetadata: sill resolveWithNewModule has-values@1.0.npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN vueDemo@1.0.0 No description
    npm WARN vueDemo@1.0.0 No repository field.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    + webpack@4.41.2
    + webpack-cli@3.3.10
    added 386 packages from 217 contributors in 162.129s
    
    E:\program\vueDemo>npm install vue          --安装vuejs
    npm WARN vueDemo@1.0.0 No description
    npm WARN vueDemo@1.0.0 No repository field.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    + vue@2.6.10
    added 1 package from 1 contributor in 37.184s

完成上面内容 想在安装vuejs cli 脚手架

先测试一下node 版本

哦对忘了差点：

vue 学习参考：[https://vuejs.bootcss.com/v2/guide/instance.html][https_vuejs.bootcss.com_v2_guide_instance.html]

vue-cli学习参考：[https://cli.vuejs.org/zh/guide/installation.html][https_cli.vuejs.org_zh_guide_installation.html]

E:\program\vueDemo>node -v   --查看node版本
    v12.13.0

根据：Vue CLI 需要 [Node.js][] 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm][] 或 [nvm-windows][] 在同一台电脑中管理多个 Node 版本。

我的是最新版，可以安装

E:\program\vueDemo>npm install -g @vue/cli  --安装vuecli

提示一下内容表示完成---如果失败，多安装几次，因为八成是网络不顺畅，我就是按了三回才安装上。

+ @vue/cli@4.0.5
    added 1088 packages from 625 contributors in 236.789s

接下来可以使用

快速开发：

vue serve 快速开发，不过要先安装一个全局

npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

安装完全局的扩展：

在目录下创建一个 App.vue

<template>
      <h1>Hello!</h1>
    </template>

![20191122133728275.png][]

之后运行cmd :项目目录下和你新建的 .vue 文档统计目录下

例如：

E:\program\vueDemo>vue serve

如果你创建的文件名不是App.vue,想我一下编辑的hello.vue则会报错：

![20191122134033680.png][]

因为默认的serve 只会查找文档为： main.js/ index.js/App.vue/app.vue.

如果和我一样那么启动如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]

打开提示的路径则会显示你需要的文档

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1][]

如果你启动发现

vue serve vue : 无法加载文件 D:\\ProgramFiles\\nodejs\\node\_global\\vue.ps1，因为在此系统上禁止运行脚 本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about\_Execut ion\_Policies。

说明没有启动权限

设置如下：

以管理员身份打开powershell

运行：

Get-ExecutionPolicy

默认的Restricted 是客户端权限，所以没有脚本功能

要修改成服务端权限：RemoteSigned

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

重新启动项目运行

vue serve hello.vue

就可以成功了！

备注：

当网络通畅，我的服务开启是时候，那么及时不在同一个电脑也可以通过远程提供的网络地址访问到我的主页：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2][]

快速原型资源包

# 正常项目创建（非快速原型）： #

选择一个要存放项目的文件夹：

vue create 要创建的项目名称

回车选择一个你要创建的类型一般有默认的三个，之后也可以使用你自己配置的模板

![20191122161338716.png][]

创建成功：如下：

![20191122161733795.png][]

按提示进入项目目录

启动项目：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4][]

创建完成项目如下：

![20191122161704888.png][]

关闭当前服务使用：Ctrl+C

[https_blog.csdn.net_woyizhizaizhaoni_article_details_103083615]: https://blog.csdn.net/woyizhizaizhaoni/article/details/103083615
[https_vuejs.bootcss.com_v2_guide_instance.html]: https://vuejs.bootcss.com/v2/guide/instance.html
[https_cli.vuejs.org_zh_guide_installation.html]: https://cli.vuejs.org/zh/guide/installation.html
[Node.js]: https://nodejs.org/
[nvm]: https://github.com/creationix/nvm
[nvm-windows]: https://github.com/coreybutler/nvm-windows
[20191122133728275.png]: https://img-blog.csdnimg.cn/20191122133728275.png
[20191122134033680.png]: https://img-blog.csdnimg.cn/20191122134033680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191122134139349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112213440259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191122134433816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[20191122161338716.png]: https://img-blog.csdnimg.cn/20191122161338716.png
[20191122161733795.png]: https://img-blog.csdnimg.cn/20191122161733795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191122161812667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191122161903640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[20191122161704888.png]: https://img-blog.csdnimg.cn/20191122161704888.png