vue项目启动命令配置（vue启动命令配置文件）

今天给各位分享vue项目启动命令配置的知识，其中也会对vue启动命令配置文件进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Vue 项目创建基础配置
• 2、vue项目没有page.json怎么启动项目
• 3、vue-cli起项目步骤
• 4、Vue项目启动过程以及配置
• 5、vue项目创建和部署使用
• 6、Vue项目-启动与本机部署

Vue 项目创建基础配置

Vue 项目创建时候的一些基础配置小记：

CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的指令，可用来创建工程、启动服务等；

CLI service 即 @vue/cli-service 开发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；

CLI 插件可以集成一些架包快速配置项目等；

项目创建，cd 到指定的目录下，执行

创建项目 create 后会有几个配置选项，具体如下：

1.use history mode for router - Y

即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由

其中 hash 模式浏览器 url 地址中会带有 # 号，而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法

2.Pick a CSS pre-processor - stylus

SCSS/SASS：scss 是 sass3 的新语法，完全兼容css3 且继承于 sass；sass 需 ruby环境，在服务端处理

LESS：借助 node.js 通过编译处理输出 css 至浏览器，同时兼容客户端与服务端运行

Stylus：用于给 node 项目进行 css 预处理支持，stylus 功能上更加强壮和 js 关系更加紧密

3.Pick a linter / formatter config - ESLint + Prettier

ESLint with error prevention only: 仅错误预防

ESLint + Airbnb config

ESLint + Standard config: 标准模式

ESLint + Prettier: 使用较多，推荐

4.Pick additional lint features - Lint on save

(·) Lint on save：保存即检查

( ) Lint and fix on commit： fix 和 commit 的时候才检查

5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files

In dedicated config files：独立文件中放置

In package.json：放在 package.json 中

6.Save this as a preset for future projects - N

是否记录本次创建工程的如上配置选项并起个名称

安装时可能需要的一些资源： nodejs 、 Homebrew

以上便是此次分享的全部内容，希望能对大家有所帮助！

vue项目没有page.json怎么启动项目

1、首先打开电脑输入解锁密码，并进入系统主页面。

2、其次打开《vue项目》，进入前端的根目录。

3、最后输入命令“npmrundev”即可启动。

vue-cli起项目步骤

一、 安装 node.js

安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

二、安装webpack

             命令：npm install webpack -g

             安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。

三、安装 vue-cli

             命令：npm install -g vue-cli

             安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

             如果提示无法识别 vue，可能是 npm 版本过低，可使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

1、在硬盘中找一个放项目的文件夹

2、在文件夹下打开命令盘，输入命令

Vue-Project是我们自己设置的项目名称，项目名称不能用中文

       命令：vue init webpack Vue-Project

3、进入项目工程目录

4、安装项目所需依赖  npm install

5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

        命令：npm install vue-router vue-resource --save

创建完成的项目目录，如下图

各个目录的作用

最后一步启动项目

         命令：npm run dev

启动成功，打开浏览器8080窗口，页面如图所示

关于vue create 和vue init webpack的区别 ？

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档 网页链接 。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

或

另一种：

Vue项目启动过程以及配置

我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。

在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。

从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。

可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。

index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。

main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。

上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。

查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介绍显示内容。

所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

到这，我们开始安装 router 、 vuex 。

Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。

输入一个大写Y，按下Enter

vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex 主要有五部分：

① 安装 vuex

接下来我们在 src目录 下创建一个 vuex 文件夹

并在 vuex文件夹 下创建一个 store.js 文件

文件夹目录 长得是这个样子

在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。

② vuex 的关系图

③ 开始使用，在 mian.js 中，引入 vuex

④然后告知 vue 开始使用 vuex (Vue.use(Vuex))

在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex

⑤接下来，在main.js中引入store

到这里算是，以及完成了。

我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改

vue项目创建和部署使用

这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：

基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。

配置淘宝源，注意 -g 是全局安装

完成之后将使用 cnpm 替换 npm ，验证 cnpm :

之后的依赖安装就可以使用 cnpm install package 或简写 cnpm i package 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。

安装 vue-cli

vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。

安装命令

验证安装

之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下是支持 vue-router 路由 （控制页面切换等操作） 的一个 main.js 具体内容

注意使用路由时，不要忘记在主模板里添加 router-view/router-view 标签，表示路由切换的位置，否则路由页面无法正常展示。

先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行

之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。

既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。

可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。

启动 vue-cli 图形界面

然后按照提示访问即可。

以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。

1. Vue.js介绍

2. Vue CLi脚手架

Vue项目-启动与本机部署

验证是否成功： 电脑win键+R--- 输入cmd ---版本号不一样没关系，输出结果为版本号就表示安装成功。

在项目终端terminal输入命令行：

NPM详细介绍可看++：-----  [NPM 使用介绍 | 菜鸟教程]

启动本地服务--- Ctrl 点击红框链接就可以看到自己的Vue项目啦~~

！注意是serve不是server嘿嘿因为我也经常写错~~~

***（这步可做可不做哦~）***

设置如下：

打开config文件夹下的index.js文件

查找（ Ctrl+F ） autoOpenBrowser更改配置为true

以下是博主参与的Vue项目demo:

大屏数据可视化嘿嘿

关于如何讲项目打包放到Github与远程服务器的部署，我们下期再见~嘿嘿嘿

关于vue项目启动命令配置和vue启动命令配置文件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。