如何创建一个Vue项目
2018-10-24 本文已影响0人
qqqywy
打开cmd命令行，安装node（带贴图）
- 步骤：打开node官网 https://nodejs.org/en/download/，进行下载安装，输入node -v，如果出现版本信息即表示安装成功。
- 输入node -v若显示版本号即表示安装成功
安装淘宝镜像
- 输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖
安装vue-cli脚手架构建工具
- 输入命令 npm install -g vue-cli，安装完成即可
1 直接使用webstorm创建，其他像idea类似
2 本地先创建项目
- 新建一个项目文件夹，右击用命令行运行
- 运行命令vue init webpack 项目名称(lmy)
在当前项目下运行
- 出现项目名等信息时直接默认下一步
-下面将会出现四个选项，除了install vue-router是yes而外，其他都是no，以免发生不必要的麻烦 - 输入npm install安装依赖库
- 输入npm run dev运行项目，即可成功
test1
vue 安装.png
clipboard.png
test2
clipboard (1).png
clipboard (2).png
clipboard (3).png
clipboard.png
Microsoft Windows [版本 10.0.17134.285]
(c) 2018 Microsoft Corporation。保留所有权利。
C:\Users\lenovo>node -v
v8.11.1
C:\Users\lenovo>npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\lenovo\AppData\Roaming\npm\vue-list -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\lenovo\AppData\Roaming\npm\vue -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\lenovo\AppData\Roaming\npm\vue-init -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 5 packages from 10 contributors, removed 20 packages and updated 85 packages in 116.155s
╭───────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 5.6.0 -> 6.4.1 │
│ Changelog: https://github.com/npm/npm/releases/tag/v6.4.1 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
C:\Users\lenovo>d:
D:\>cd VueStudy
D:\VueStudy>vue init webpack my-album
? Project name my-album
? Project description A Vue.js project
? Author YEndless <895315416@qq.com>
? 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 "my-album".
# Installing project dependencies ...
# ========================
> uglifyjs-webpack-plugin@0.4.6 postinstall D:\VueStudy\my-album\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 ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1132 packages from 657 contributors and audited 10615 packages in 208.946s
found 1 moderate severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
# Project initialization finished!
# ========================
To get started:
cd my-album
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
D:\VueStudy>被《无问西东》感动了。 不是因为它人物塑造得有多好，它讲故事的方式有多好，它的剪辑手法有多厉害。事实 上有很多地方人物的动机不明确，讲故事的手法有...^Z^Z
'被《无问西东》感动了。' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
D:\VueStudy>npm install
npm WARN saveError ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\VueStudy\package.json'
npm WARN VueStudy No description
npm WARN VueStudy No repository field.
npm WARN VueStudy No README data
npm WARN VueStudy No license field.
up to date in 1.621s
found 0 vulnerabilities
D:\VueStudy>cd my-album
D:\VueStudy\my-album>npm run dev
> my-album@1.0.0 dev D:\VueStudy\my-album
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 5371ms 09:17:15
I Your application is running here: http://localhost:8081
