精华内容
下载资源
问答
  • 【vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...

    前言

    最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面

    因为公司的项目比较早的原因(虽然当时vue-cli3.0也出来了一段时间,但是不敢轻易尝试啊!)

    而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!)

    所以所有项目开发的时候一直在用的 vue-cli2.0

    后来项目多了也没时间就没往 vue-cli3.0 迁移

    现在终于到了空闲期,可以尝试着慢慢迁移了

    本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建过程

    一、升级本地环境

    因为 vue-cli3.0 要 nodeJs ≧ 8.9(官方推荐 8.11.0+),所以我们先去 官网下载 一个稳定的新版本覆盖本地版本

    我安装的是 node12.13.0 版本,因为之前我本地全局安装了 2.0 的环境,所以需要全局卸载再安装 3.0

    npm uninstall -g vue-cli
    
    npm install -g @vue/cli

    安装好了之后输入 vue -V 查看版本

    我我我草!!!最近只顾着看技术了,没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了!!!

    有没有搞错,我 vue-cli3.0 还没来得及用上呢!还好看了下文档,除了跟 vue-cli3.0 的目录有点变化其他没变。

    那就直接开始搞 vue-cli4.0 吧!

    二、搭建项目

    vue-cli3.0 以后项目创建的命令变成了下面这样

    vue create <Project Name> //文件名 不支持驼峰(含大写字母)

    竟然还被嫌弃了我的网速,我还就不用 cnpm 了!

    选择不使用淘宝镜像后,选择手动配置

    default 是使用默认配置

    Manually select features 是自定义配置

    我的自定义配置如下

    选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置

    css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

    sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

    选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

    然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit   fix 或者 commit 的时候检查,建议第一个

    下面就是如何存放配置了,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中

    本着项目结构简单的想法,我选择了第二个

    最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

    我这里就不保存了,原因是熟能生巧!哈哈哈

    然后就等待创建项目吧

    出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入 npm run serve 就可以了

    你以为这样就完了吗?我也是这样认为的,可它不是这样的!

    很明显,虽然项目能够正常启动,但是我的 nodeJs 版本用的太高了,然后我给回退到了 11.11.0 版本

    虽然没影响太大的影响,但是我不想看见 WARN!回退之后,重新跑项目就不会有问题了。

    三、环境配置

    下面就是关于项目的环境配置了,我这边一般喜欢用 test、preview、production分别表示测试,预览,生产三种环境

    修改 package.json 文件如下

    "scripts": {
        "serve": "vue-cli-service serve",
        "test": "vue-cli-service build --mode test",           //测试
        "preview": "vue-cli-service build --mode preview",     //预览
        "build": "vue-cli-service build --mode production",    //生产
        "lint": "vue-cli-service lint"
    },

    在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应

    .env.test 代码如下

    NODE_ENV="test"
    VUE_APP_BASE_URL="测试环境域名"

    .env.pre 代码如下

    NODE_ENV="preview"
    VUE_APP_BASE_URL="预览环境域名"

    .env.prod 代码如下

    NODE_ENV="production"
    VUE_APP_BASE_URL="生产环境域名"

    ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了

    npm run test    //测试
    npm run pre     //预发布
    npm run prod    //生产

    另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置

    所以记得有需要记得新建一个然后存放配置

    我的 .env.development 代码如下

    NODE_ENV="development"
    VUE_APP_BASE_URL="本地环境域名"

    四、项目配置

    从 vue-cli3.0 开始 build 和 config 目录就取消了,如果需要修改配置,可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,这里就不分别介绍了,可以 访问官方文档

    五、项目迁移

    剩下的就是比较简单的工作了,因为 2.0/3.0/4.0 的src目录是基本一致的,所以照着原来的项目搬进来就可以了

    唯一需要注意的就是路径的问题了

    结束语

    本来,这个文章真的是为了从 2.0 迁移到 3.0 的,没想到 4.0 都发布了,那刚好迁移到 4.0 得了

    文章标题我会修改为 4.0,但是文章内可能还会有 3.0 我就不修改了

    一是证明我的最初想法,二是感慨前端的发展速度!

     

    有问题欢迎评论指出

    展开全文
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...

           Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

           下面介绍三种 Vue.js 的安装方法:

            1.独立版本

           我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)

    使用vue多页面开发:

    1. 引入vue.js
    2. 创建一个vue根实例  new Vue({选项})

            2.使用CDN方法

         3.NPM方法(推荐使用)

          在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

         首先,先列出我们接下来需要的东西:

    • node.js环境(npm包管理器)
    • vue-cli 脚手架构建工具
    • cnpm npm的淘宝镜像      

           1) 安装node.js

                从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

            node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

                  

                 npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。

                  

            到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.

         2) 安装cnpm

               在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

                

           完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

     

          3) 安装vue-cli 脚手架构建工具(必须在全局中进行安装)

               在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

               是否安装成功:vue -V

                通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

     

            首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

             

    在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图:

    若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:

    是否是在本目录下进行创建

            

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

    • Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
    • Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
    • Author:作者,如果你有配置git的作者,他会读取。
    • Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
    • Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
    • setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
    • Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n

        运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:

         

     接下来,我们去NoteTest目录下去看是否已创建文件:

          

      打开firstApp 项目,项目中的目录如下:

          

        介绍一下目录及其作用:

         build:最终发布的代码的存放位置。

         config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

         node_modules:npm 加载的项目所需要的各种依赖模块。

         src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

                 assets:放置一些图片,如logo等

                 components:目录里放的是一个个的组件文件

                 router/index.js:配置路由的地方

                 App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。

                 main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。

         static:静态资源目录,如图片、字体等。

         test:初始测试目录,可删除

          .XXXX文件:配置文件。

         index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

         package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

         README.md:项目的说明文件。

         webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。

         .babelrc:是检测es6语法的文件的配置

         .getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)

         .postcssrc.js:前缀的配置 

         .eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)

         .eslintignore:忽略eslint对项目某些文件的语法规则的检查

     

        这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

        cd  项目名;进入项目中

        安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install   (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

    若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目

        

        安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

        

     安装完依赖包资源后,我们就可以运行整个项目了。

        

       运行项目

        在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

        

        项目启动后,在浏览器中输入项目启动后的地址:

      

        在浏览器中会出现vue的logo:

         

    至此,vue的三种安装方式已介绍完毕。

     

    项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。

    一、搭建vue的开发环境(大纲)

    1. 必须安装node.js
    2. 搭建vue的开发环境,安装vue的脚手架工具    官方命令行工具

    npm install - -global vue-cli

         3.创建项目   必须cd到对应的一个项目里面

    vue init webpack vue-demo01

    cd  vue-demo01

    cnpm install   /  npm install          如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 

    npm run dev/npm run start

         4.另一种创建项目的方式中小型项目   (推荐)  ***

    vue init webpack-simple vuedemo02

    cd  vuedemo02       

    cnpm install   /  npm install           

    npm run dev

     

    拿到别人的项目不能正常运行后看有没有node_modules这个文件(项目所有的依赖),若没有cd到项目中安装项目的依赖:cnpm install/npm install

     

    二、升级:vue-cli3.0

    一、使用vue-cli3.0

    1. Vue CLI的包名称由vue-cli改成了@vue/cli
    2. 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
    3. Node.js8.9+
    4. 安装vue3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli
    5. 版本是否是3.x    vue --version/vue -V
    • 通过vue-cli创建项目
    1. 创建项目命令

    vue create 项目名;   项目名不建议存在大写,中间用-隔开

    这时候需要注意创建项目需要预先安装的插件:

    默认的会有Babel + ESLint;但是不建议默认,选择下面:

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
    ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router(vue路由)
    ( ) Vuex // vuex(vue的状态管理模式)
    ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
    ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
    ( ) Unit Testing // 单元测试(unit tests)
    ( ) E2E Testing // e2e(end to end) 测试 

    等待项目初始化完成。。。。。。

    1.cd 到项目里

    2.npm run serve   运行项目

     

    或者使用图形化界面创建项目:

    vue ui

     

     

    看了那么多的vue.js的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!

    参考文献:https://blog.csdn.net/m0_37479246/article/details/78836686

    展开全文
  • Vue02_第一个vue-cli项目

    万次阅读 2020-08-31 16:21:43
    Vue02_第一个vue-cli项目 nodejs 的下载和安装 官网下载(选择windows64位的版本):http://nodejs.cn/download/ 安装:无脑下一步 测试是否安装成功: 安装淘宝镜像: npm install cnpm -g 使用淘宝镜像安装 ...

    Vue02_第一个vue-cli项目


    • nodejs 的下载和安装

    官网下载(选择windows64位的版本):http://nodejs.cn/download/

    安装:无脑下一步

    测试是否安装成功:
    在这里插入图片描述
    安装淘宝镜像:

    npm install cnpm -g
    

    使用淘宝镜像安装 vue-cli:

    cnpm install vue-cli -g
    

    全局安装的路径:

    C:\Users\[电脑用户名]\AppData\Roaming\npm\node_modules
    

    • 创建 vue-cli 项目:
    vue init webpack myvue
    
    ? Project name myvue
    ? Project description A Vue.js project
    ? Author BLU
    ? Vue build
    > 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 - re
    nder functions are required elsewhere
    ? Install vue-router? (Y/n) n
    ? Use ESLint to lint your code? (Y/n) n
    ? Set up unit tests (Y/n) n
    ? Setup e2e tests with Nightwatch? (Y/n) n
    ? Should we run `npm install` for you after the project has been created? (recommended)
      Yes, use NPM
      Yes, use Yarn
    > No, I will handle that myself
    
    Vue build 选择 Runtime + Compiler: recommended for most users
    Should we run `npm install` for you after the project has been created? 选择 No
    
    进入项目路径:
    cd myvue
    
    初始化项目:
    npm install
    
    启动项目:
    npm run dev
    

    在这里插入图片描述

    展开全文
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选...
    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,
    也是试的玩了一下,大致写写怎么玩的!
    

    1.先全局安装vue-cli3.0
    这里写图片描述

    检测安装:
    vue  -V
    

    这里写图片描述

    2.创建项目(这个就跟react创建脚手架项目比较像了)

    这里写图片描述
    创建项目

    这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是
    让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个
    

    这里写图片描述

    当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键
    选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里
    演示,我随便选了几个
    

    这里写图片描述

    下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择,我是一直用的less
    

    这里写图片描述

    上面这个是问你选择哪个自动化代码格式化检测,配合vscode编辑器的
    Prettier - Code formatter插件,我选的随后一个
    

    这里写图片描述

    这里第一个选项是问你是否保存刚才的配置,选择确定后你下次再创建新项目
    就有你以前选择的配置了,不用重新再配置一遍了
    

    这里写图片描述

    上边这俩意思问你像,babel,postcss,eslint这些配置文件放哪?
    第一个是:放独立文件放置
    第二个是:放package.json里
    这里推荐放单独配置文件,但是你随意啊
    

    这里写图片描述

    上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗?
    最后一个是描述项目,你随意选择,点击确定就开始下载模板了
    

    这里写图片描述

    下载好后,项目结构就变成这样了,相比2.0精简了很多,
    然后cd 进项目,启动服务npm run serve,
    这里发现少了vue.config.js文件,那以前的配置怎么搞?
    

    这里写图片描述
    上边是2.0的目录结构
    这里写图片描述
    这个是3.0的目录结构,比2.0少了好多,这些都放在@vue/文件下了,你可以打开看看

    
    下边你要做的就是在根目录下新建一个vue.config.js文件,进行你的配置,具体配置看文档,我在最下边简单罗列了几个
    
    当然如果你不想用3.0的话,还是可以继续使用2.0的,官方文档是这样说的:
    

    这里写图片描述

    这里简单罗列vue,config.js一些配置项
    当然你配置接口地址时还是通过下边这个来获取
    在main.js里或者单独配置接口地址的文件里:
    var env = process.env.NODE_ENV
    console.log(env)
    
    // vue.config.js 配置说明
    // 这里只列一部分,具体配置惨考文档啊
    module.exports = {
        // baseUrl  type:{string} default:'/' 
        // 将部署应用程序的基本URL
        // 将部署应用程序的基本URL。
        // 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。
        // https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.
    
        baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    
        // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    
        // outputDir: 'dist',
    
        // pages:{ type:Object,Default:undfind } 
    /*
      构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
      个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目
      的字符串,
      注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
    */
        // pages: {
            // index: {
                // entry for the page
                // entry: 'src/index/main.js',
                // the source template
                // template: 'public/index.html',
                // output as dist/index.html
                // filename: 'index.html'
            // },
            // when using the entry-only string format,
            // template is inferred to be `public/subpage.html`
            // and falls back to `public/index.html` if not found.
            // Output filename is inferred to be `subpage.html`.
            // subpage: 'src/subpage/main.js'
        // },
    
        //   lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
        lintOnSave: true,
        // productionSourceMap:{ type:Bollean,default:true } 生产源映射
        // 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
        productionSourceMap: false,
        // devServer:{type:Object} 3个属性host,port,https
        // 它支持webPack-dev-server的所有选项
    
        devServer: {
            port: 8085, // 端口号
            host: 'localhost',
            https: false, // https:{type:Boolean}
            open: true, //配置自动启动浏览器
            // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
            proxy: {
                '/api': {
                    target: '<url>',
                    ws: true,
                    changeOrigin: true
                },
                '/foo': {
                    target: '<other_url>'
                }
            },  // 配置多个代理
        }
    }
    
    展开全文
  • vue-cli

    千次阅读 2020-11-27 13:30:11
    vue-cli2和vue-cli3的区别 https://www.cnblogs.com/webdragon/p/11025921.html 网上很多vue-cli2和vue-cli3混合在一起的博文, 但大部分都没写是哪个版本的 vue-cli3的两种创建方式: vue ui 和 vue create 项目名 ...
  • 使用npm全局安装vue-cli: npm install -g @vue/cli 可以使用如下的创建项目的命令,查看vue cli的安装情况: 按照上面的提示,先卸载之前的版本,然后安装新的版本。 安装成功后,如果要查看安装的cli的...
  • 关于vue-cli 中执行的 vue-cli-service

    万次阅读 2020-04-21 17:17:20
    最近又整回vue去了,不说了,还是脚手架先整吧。..."scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 这里执行的是vue-cli...
  • vue-cli3.x打包后静态资源的路径

    万次阅读 2019-06-24 10:50:50
    vue-cli3.0移除了配置文件目录: config和build文件夹,可以说是非常的精简 修改vue.config.js module.exports = {} 里面的publicPath属性即可
  • vue-cli-service build 环境设置

    万次阅读 多人点赞 2018-12-26 14:09:53
    原文链接:vue-cli-service build 环境设置 使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。 npm run serve时会把process.env.NODE_ENV设置为‘development’; npm run build 时会把process.env...
  • vue项目运行报错:serve: vue-cli-service serve 首先,你先去检查下你配置的 host:地址是多少 ,比如我的是localhost,如果用的是局域网IP 那就要更改成你目前的局域网IP 或 改成localhost module.exports = { dev...
  • Vue基础入门---Vue-cli 教程

    万次阅读 多人点赞 2018-09-02 16:56:57
    Vue-cli是vue官方出品的快速构建单页应用的脚手架,如果你是初次尝试Vue,我不建议使用,推荐你老老实实用普通引入javascript文件的方式进行学习(你可以去看我的vue视频教程的1-4季),这里牵扯的东西很多,有...
  • Vue 使用Vue-CLI4 创建Vue项目

    万次阅读 2019-11-07 10:23:31
    安装vue-cli npm install -g @vue/cli-service-global 创建项目 vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以...
  • Vue-cli 3.X 构建工具零基础快速上手

    千人学习 2019-10-12 11:02:01
    主要课程内容: 本课程的脚手架工具为vue-... vue-cli提供了一套本地的node测试服务器,使用vue-cli自己提供的命令,就可以启动服务器。 vue-cli中集成打包上线的方案,极大提升我们的vue项目的开发效率。
  • vue-cli安装报错npm WARN deprecated coffee-script@1.12.7

    万次阅读 热门讨论 2019-03-08 14:46:49
    安装Vue-cli时候,执行npm install -g vue-cli报错npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to “coffeescript” (no hyphen),如图: 解决办法: npm install --global ...
  • Vue-vue-cli---初识,网路请求,组件传参

    千次阅读 多人点赞 2020-06-22 16:54:34
    vue-cli---初识,网路请求,组件传参vue-cli的初识view页面的认识---vue组件的组成写法与vue单页面相同cli的组件的调用vue-cli---css样式vue中的生命周期函数---钩子函数vue-cli中的文件是,.vue文件vue-lic---网络...
  • 使用Vue-CLI创建Vue项目

    千次阅读 多人点赞 2020-04-21 21:45:33
    利用Vue-CLI初始化构建Vue项目时,我们将会获得一个初始的文件夹结构,如下所示: 2 . 安装Vue-CLI npm install -g @vue/cli 或 yarn global add @vue/cli 例: 3 . 使用vue --version或vue -V指令,查...
  • vue-cli3搭建项目之webpack配置

    万次阅读 多人点赞 2019-02-14 13:17:10
    vue-cli3搭建完整项目之webpack配置 ​ 前面篇介绍了项目初始化,下面就要开始对项目webpack进行配置,由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置...
  • Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    万次阅读 多人点赞 2017-02-15 17:29:14
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli   vue/cli 3.x 已经发布,如果使用 3.x 构建项目,请参考《Vue...
  • Vue - Vue Cli 3.0 之 vue-cli-service

    万次阅读 2018-06-26 10:37:14
    样例 新建项目后,package.json 下的 script &amp;quot;...vue-cli-service serve&amp;quot;, &amp;quot;build&amp;quot;: &amp;quot;vue-cli-service build&amp;quot;,
  • vue-cli3脚手架/单文件/环境搭建

    万次阅读 2018-11-15 14:54:59
    vue-cli3脚手架/单文件/环境搭建。vue3.x版本相对于2.x版本做了许多地方的优化,个人总结主要还是使用上使开发者更加一目了然,配置起来也更加的方便,减少了各种webpack里面的loader的配置.下面一起看一下,3.x版本该...
  • Vue新手学习笔记:vue-cli框架

    千次阅读 多人点赞 2019-01-17 17:08:41
    搭建vue-cli项目 作为一个喜欢动手的人,在理论有一定了解的情况下,我选择通过实践来让我记住之前看过的理论,因为我看完就忘 1.安装node.js及npm npm官网地址 下载node,安装很简单一直下一步就可以了。 win+...
  • vue-cli3内存溢出,JavaScript heap out of memory

    万次阅读 热门讨论 2019-01-11 16:26:23
    本地一个项目是使用vue-cli2构建的,遭遇了运行npm run dev出现过因为模块过多,无法运行的问题。 这一次是为了升级到vue-cli3体验一下。 解决办法 vue-cli2的解决办法是: npm run dev和npm run build都可以直接...
  • 【vue】vue-cli,vue-router重点组件(详细配置及用法说明) 1. vue-cli:创建项目基本结构的工具
  • vue-cli的卸载与安装

    万次阅读 2019-08-15 09:29:17
    这里写自定义目录标题前提条件卸载vue-cli(1.x或2.x)卸载cli3安装cli3 前提条件 自己电脑已经安装node.js和npm 卸载vue-cli(1.x或2.x) 旧版本: Vue CLI的包名称由vue-cli改成了@vue/cli。 如果已全局安装了旧版本的...
  • 浅谈vue-cli 3 和 vue-cli 2的区别!!!

    万次阅读 多人点赞 2018-08-13 17:12:21
    Vue-cli3.0于8.11日正式发布,看了下评论,不是特别的乐观,说说我个人的意见,我是Vue的忠实粉,so.... 大概三个月前超哥就已经得知3.0的消息,试着用了下,相比之下现在的3.0和测试时的区别: modern mode。启用...
  • 基于vue-cli、elementUI的Vue超简单入门小例子

    万次阅读 多人点赞 2018-03-03 23:14:16
    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛...#如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my...
  • 浅析vue-cli2和vue-cli4

    千次阅读 2020-05-11 16:04:39
    查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli3 vue --version 如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装 安装2.0版本: npm install -g vue-cli 安装3.0版本: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,932
精华内容 20,772
关键字:

vue-cli

vue 订阅