您的位置: 首页  >  文章  >  我的第一个Vue工程

我的第一个Vue工程

分类: 文章 • 2023-10-23 07:50:07

1.新建一个workspace，我这边叫jayceevue；

2.用IDE打开这个workspace，我用的VSCode；

3.按住Ctrl+`，在终端TERMINAL中输入

npm install -g vue-cli

 运行结果如下:

Microsoft Windows [版本 10.0.17134.472]
(c) 2018 Microsoft Corporation。保留所有权利。

D:\jayceevue>npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Alex\AppData\Roaming\npm\vue-init -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Alex\AppData\Roaming\npm\vue -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Alex\AppData\Roaming\npm\vue-list -> C:\Users\Alex\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
updated 1 package in 18.302s

4.Vue安装好之后搭建脚手架，输入

vue init webpack FaceWarrantWeb

FaceWarrantWeb是工程的名字

之后会让你输入项目名字，我这边默认还是FaceWarrantWeb，回车即可

然后输入项目描述、作者、默认标准模式、使用vue-router、不使用ESLint检查语法、不启用单元测试、不用Nightwatch。

运行结果如下：

D:\jayceevue>vue init webpack FaceWarrantWeb

? Project name fw-web
? Project description A Vue.js project
? Author jaycee <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "FaceWarrantWeb".


# Installing project dependencies ...
# ========================

npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> [email protected] postinstall D:\jayceevue\FaceWarrantWeb\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1130 packages from 650 contributors and audited 10654 packages in 82.619s
found 2 vulnerabilities (1 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  cd FaceWarrantWeb
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

5.创建好之后，进入你的项目目录

D:\jayceevue>cd FaceWarrantWeb

6.编译项目，输入

npm run dev

运行结果如下：

D:\jayceevue\FaceWarrantWeb>npm run dev

> [email protected] dev D:\jayceevue\FaceWarrantWeb
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3627ms                                                                                               11:04:07
 I  Your application is running here: http://localhost:8080

按住Ctrl，点击 http://localhost:8080

至此一个Vue项目就好了

如下图所示

我的第一个Vue工程

 7.打包发布之前先按住Ctrl+C，输入y终止服务，然后输入

npm run build

运行结果如下：

 I  Your application is running here: http://localhost:8080                                                                     终止批处理操
作吗(Y/N)? y

D:\jayceevue\FaceWarrantWeb>npm run build

> [email protected] build D:\jayceevue\FaceWarrantWeb
> node build/build.js

Hash: 773c4fe00f487edd1c37
Version: webpack 3.12.0
Time: 5940ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.42fc6c515ccdfe89bd76.js     113 kB       0  [emitted]  vendor
                  static/js/app.b22ce679862c47a75225.js    11.6 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  828 bytes          [emitted]
           static/js/vendor.42fc6c515ccdfe89bd76.js.map     560 kB       0  [emitted]  vendor
              static/js/app.b22ce679862c47a75225.js.map    22.2 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  508 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

项目目录中dist就是打好之后的包了

我的第一个Vue工程

 

相关推荐