创建VUE项目(2.9.6)

最新推荐文章于 2024-05-16 17:54:12 发布

JDBOY_DEBUG

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量5.7k

点赞数 9

分类专栏： vue笔记文章标签： vue 创建笔记

本文链接：https://blog.csdn.net/y645633369/article/details/95527896

版权

vue笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

创建VUE项目

创建VUE项目

注意:此篇使用脚手架的版本是2.9.6版本

环境安装

git
node.js
vue
vue-cli

环境安装这块下次在好好详细深究下吧,今天好好看下怎么样创建一个VUE项目

创建项目

1.执行创建项目命令

在要创建项目的目录下执行指令,test存放将要创建的项目的目录名

vue init webpack "test"

注意:
这个命令的作用是在当前目录中创建一个目录名为test的目录,里面准备存放将要创建的VUE项目代码,之后会询问是否继续使用这个test来当做项目名,(也就是说这个目录名可以和项目名不同的)

2.确定项目名

? Project name (test)

翻译

? 项目名是(test)

直接按回车就可以
注意
项目名不可以包含大写字母,例:

创建一个项目名为 vueDemo 的项目
vue init webpack "vueDemo"
? Project name (vueDemo)
>> Sorry, name can no longer contain capital letters.(此处的翻译:抱歉，名称不能够包含大写字母。)

3.确定项目说明

? Project description (A Vue.js project)

翻译

? 项目说明(一个vue.js项目)

直接按回车就可以

4.确定作者

? Author (***<......@qq.com>)

翻译

 ? 作者(作者名<作者邮箱>)

直接回车就可以

5.确定编译方式

? Vue build (User arrow keys)
>  Runtime + Compiler: recommended for most users
   Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -render functions are required elsewhere

翻译

Vue 编译方式?(用户使用上下键选择,回车键确定)
>  运行时+编译器：建议大多数用户使用
   仅运行时：比min+gzip轻约6KB，但模板（或任何特定于Vue的HTML）只允许在.vue文件中使用-其他地方需要呈现函数

还是直接回车

6.是否安装vue路由

? Install vue-router? (Y/n)

翻译

? 安装 vue-路由?(是/否)

输入Y并回车

7.是否使用ESLine来约束代码书写风格

? Use ESLint to lint your code?(Y/n)

翻译

使用 ESLine 来约束你的代码?

说明

ESLine是一个检查语法规范的工具

输入Y并回车

8.选择预设的ESLine规则

? Pick an ESLint preset (User arrow keys)
>  Standard (https://github.com/standard/standard)
   Airbnb (https://github.com/airbnb/javascript)
   none (configure it yourself)

翻译

请选择预设的ESLint规则(用户按键选择)
>   标准规范(https://github.com/standard/standard)
     爱彼迎公司推出的js标准(https://github.com/airbnb/javascript)
     没有规则(自己定义规则)

扩展:

Airbnb是AirBed and Breakfast ("Air-b-n-b")的缩写，中文名：爱彼迎 [1]  。爱彼迎是一家联系旅游人士和家有空房出租的房主的服务型网站，它可以为用户提供多样的住宿信息。
                                                          							 -----摘自百度百科

我直接选择标准规范

9.设置单元测试

? Set up unit tests (Y/n)

翻译

设置单元测试?

输入n并回车

10.设置e2e测试

? Setup e2e tests with Nightwatch?(Y/n)

翻译

使用Nightwatch框架设置e2e测试

输入n并回车

11.设置安装方式

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
>    Yes, use NPM
     Yes, use Yarn
     No, I will handle that myself

翻译

需要在项目创建后为您运行"npm install"来进行安装吗?(建议)(使用方向键)
>  是的, 使用npm
   是的, 使用Yarn
   不,我自己处理

直接回车,使用NPM安装
扩展

刚创建的项目有很多依赖包需要下载,可以使用npm工具或者yarn工具类自动下载

12.等待项目自动安装

   vue-cli · Generated "test".


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

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
> core-js@2.6.9 postinstall E:\VsCodeProjects\fsProjects\test\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> uglifyjs-webpack-plugin@0.4.6 postinstall E:\......\....\....\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 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"})
added 1311 packages from 700 contributors and audited 12213 packages in 357.601s
found 10 vulnerabilities (6 moderate, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================
> test@1.0.0 lint E:\***\####\...(这里是项目目录地址,请忽略)
> eslint --ext .js,.vue src "--fix"

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

To get started:

  cd test
  npm run dev

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

13.运行项目

输入命令行

cd test
npm run dev

等待出现提示

DONE Compiled successfully in 3566ms
I           Your application is running here:http://localhost:8080

看到上面的提示后去浏览器输入提示中给出的地址就可以看到项目了

http://localhost:8080

(备注:版本的不同可能导致运行命令的不同,可以找到项目的根目录里面的package.json文件,看到有一个scripts的属性,里面就是当前项目的所有命令,自定义命令也在这里)
例:

{
  "name": "test",
  "version": "1.0.0",
  "description": "ui base",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "buildprod": "set NODE_ENV=production&&node build/build.js",
    "buildtest": "set NODE_ENV=test&&node build/build.js",
    "builduat": "set NODE_ENV=uat&&node build/build.js"
  },
  "dependencies": {
  }
  }

因为我的是dev,所以使用命令npm run dev
也有的默认的是serve 使用的命令就应该是npm run serve

14.停止项目

在提示的指令窗口中按ctrl+c就会停止项目

JDBOY_DEBUG

关注

9
点赞
踩
36

收藏

觉得还不错? 一键收藏
10
评论
创建VUE项目(2.9.6)

创建VUE项目环境安装gitnode.jsvuevue-cli环境安装这块下次在好好详细深究下吧,今天好好看下怎么样创建一个VUE项目创建项目1.执行创建项目命令在要创建项目的目录下执行指令,test是要创建项目的项目名vue init webpack "test"2.确定项目名? Project name (test)翻译? 项目名是(test)直接按回车...
复制链接

扫一扫

专栏目录