精华内容
参与话题
问答
  • Vue.js 一、 单文件组件 1. .vue文件 .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js .vue文件由三部分组成:<...

    Vue.js

    一、 单文件组件

    1. .vue文件

    .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
    
    .vue文件由三部分组成:<template>、<style>、<script>
        <template>
            html
        </template>
    
        <style>
            css
        </style>
    
        <script>
            js
        </script>
    

    2. vue-loader

    浏览器本身并不认为.vue文件,所以必须对.vue文件进行加载解析,此时需要vue-loader
    类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等
    需要注意的是vue-loader是基于webpack的     
    

    3. webpack

    webpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理
    实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件 
    简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出
    

    官网

    webpack有一个核心配置文件:webpack.config.js,必须放在项目根目录下
    

    4. 示例,步骤:

    4.1 创建项目,目录结构 如下:

    webpack-demo
    |-index.html
    |- src
    ---- |-main.js 入口文件
    ------|-App.vue vue文件
    |-package.json 工程文件
    |-webpack.config.js webpack配置文件
    |-.babelrc Babel配置文件

    mkdir webpack-demo
    touch index.html webpack.config.js .babelrc
    mkdir src
    cd src
    touch main.js App.vue

    4.2 编写App.vue

       <template>
       <div id="app">
           <h1>{{msg}}</h1>
       </div>
       </template>
    
       <script>
       export default {
           name: 'app',
           data () {
               return {
               msg: 'Welcome to ruanmou'
               }
           }
       }
       </script>
    

    4.3 安装相关模板

    npm install vue -S
    
    npm install webpack -D
    npm install webpack-cli -D
    cnpm install webpack-dev-server -D
    
    npm install vue -D
    npm install vue-loader -D
    npm install css-loader -D
    npm install vue-style-loader -D
    npm install file-loader -D
    npm install url-loader -D
    npm install html-webpack-plugin -D
    
    npm install babel-loader -D
    npm install @babel/core -D
    npm install @babel/preset-env -D  //根据配置的运行环境自动启用需要的babel插件
    npm install vue-template-compiler -D //预编译模板
    
    合并:npm install -D webpack webpack-cli webpack-dev-server vue vue-loader css-loader vue-style-loader file-loader url-loader babel-loader @babel/core @babel/preset-env vue-template-compiler
    

    4.4 编写main.js

        /**
         * 使用ES6语法引入模板
         */
        import Vue from 'vue'
        import App from './App.vue'
    
        new Vue({
            el:'#app',
            render:function(h){ //使用render函数渲染组件
                return h(App);
            }
        });
    
    
    -------------------------------------------------
    
       /**
         * 使用ES6语法引入模板
         */
        import Vue from 'vue'
        import App from './App.vue'
        import VueRouter from './router/index.js';
    
        // 第一种写法: index.html里的dom 为app作为模板
        // new Vue({
        //     el:'app',
        //     data:{
        //         hello:'hello',
        //         msg: 'Welcome to ruanmou'
        //     }
        // })
    
        //第二种写法:template 模式, 需要compiler去编译成render函数进行渲染页面,性能不是最优
        // new Vue({
        //     el:'app',
        //     data:{
        //         hello:'hello',
        //         msg: 'Welcome to ruanmou'
        //     },
    
        //     // template:`<div id="app1">
        //     //             <h1>{{msg}}</h1>
        //     //         </div>`,
    
        //     // 改成引用组件就是下面的模式
        //     components:{
        //         App //App:App 
        //     }, //注册全局组件
        //     template:'<App/>'
        // });
        
        //第三种写法:render模式,性能最优
         new Vue({
            el:'#app',
            router:VueRouter,
            data:{
                hello:'hello',
                msg: 'Welcome to ruanmou'
            },
            //创建虚拟Dom,不用组件
            // render(createElement){
            //     return createElement('div',{
            //         id: "app1",
            //         style:{
            //             color:'red'
            //         }
            //         },[
            //             createElement('h1',this.msg),
            //             createElement('span','world')
            //         ])
            // },
            //使用组件, 利用render函数渲染
            render:function(h){
                    return h(App);
             },
            //  render:h => h(App)
            mounted(){
                console.log(this);
            }
        });
    
    

    4.5 编写webpack.config.js

        //入口文件
        var path = require('path'); 
        var SRC_PATH = path.resolve(__dirname,'./src');
        var DIST_PATH = path.resolve(__dirname,'./dist');
        const VueLoaderPlugin = require('vue-loader/lib/plugin');
        
        module.exports={
            //配置入口文件
            entry:SRC_PATH +'/main.js',
            //配置入口文件输出位置
            output:{
                path:DIST_PATH, //项目根路径
                filename:'[name].js'
            },
            resolve: {
                //别名
                alias: {
                'vue$': 'vue/dist/vue.esm.js'
                },
                extensions: ['*', '.js', '.vue', '.json']
            },
            //配置模块加载器
            module:{
                rules:[
                    {
                        test: /\.css$/,
                        use: [
                        'vue-style-loader',
                        'css-loader'
                        ]
                    }, 
                    {
                        test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
                        use:'vue-loader'
                    },
                    {
                        test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载,除了node_modules以外
                        use:'babel-loader',
                        exclude:/node_modules/
                    }
                ]
            },
            // 开发服务器 
            devServer: { 
                hot: true, // 热更新,无需手动刷新 
                contentBase: path.resolve(__dirname, './dist/'),  //热启动文件所指向的文件路径
                host: '0.0.0.0', // host地址 
                port: 8082, // 服务器端口 
                historyApiFallback: true, // 该选项的作用所用404都连接到index.html 
                publicPath:'/', //默认设置
                proxy: { 
                "/api": "http://localhost:3000" 
                // 代理到后端的服务地址,会拦截所有以api开头的请求地址
                 } ,
                useLocalIp: true ,
                // open:true,
                // noInfo:true
            },
            // 插件
            plugins: [
                new VueLoaderPlugin()
            ]
    
        }
    

    4.6 编写.babelrc

    {
        "presets":[
              [ 
                "@babel/preset-env", { 
                    "useBuiltIns": "usage", //按需注入
                    "corejs": "2", // 声明corejs版本
                    "targets": { 
                        "browsers": [ "> 1%", "last 5 versions", "ie >= 8" ] 
                    } 
                }
             ]
        ]
    }
    

    4.7 编写package.json

        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "dev": "webpack-dev-server --config webpack.config.js",
            "build": "webpack --config webpack.config.js"
        }
    

    4.8 运行测试

    npm run dev    
    npm run build
    

    4.9 理顺8个版本vue的区别(小结)

    vue.js : vue.js则是直接用在<script>标签中的,完整版本,直接就可以通过script引用。
    vue.common.js :预编译调试时,CommonJS规范的格式,可以使用require("")引用的NODEJS格式。
    vue.esm.js:预编译调试时, EcmaScript Module(ES MODULE),支持import from 最新标准的。
    
    //----------------------------------------------------------------------
    Runtime-only
    vue.runtime.js :生产的运行时,需要预编译,比完整版小30%左右,UMD
    vue.runtime.common.js:生产运行时,commonJS标准。 CommonJS
    vue.runtime.esm.js:生产运行时,esm标准。  ES Module 
    
    
    https://www.jb51.net/article/147538.htm
    

    4.10 配置路由

    安装

    npm install vue-router -D

    配置

    新建router/index.js

    import Vue from "vue";
    import VueRouter from "vue-router";
    
    Vue.use(VueRouter);
    
    import home from '../pages/home.vue';
    import news from '../pages/news.vue';
    
    var allRoutes = [{
        path:'/home',
        name:'home',
        component:home
    },{
        path:'/news',
        name:'news',
        component:news
    }]
    export default new VueRouter({
        routes:allRoutes,
        mode:'hash',
        base:'/',
        //   vue-router 认为只有路由真正匹配时,才会加上 exact-active-link 这个 class,
        //   如果只有一部分重合,就会加上 active-menu。
        // fallback
        // 不是所有浏览器都支持前端路由的方式,如果不支持,设置 fallback: true,
        // vue 会自动 fallback 到 hash 模式。
        fallback: true,
        linkActiveClass: "active-menu",
        linkExactActiveClass: "exact-active-menu",
    })
    

    // 在main.js中把router 实例注入到 vue 根实例中,就可以使用路由了

    在main.js里注入

    import VueRouter from './router/index.js';
    new Vue({
            el:'#app',
            router:VueRouter
            ....
    })
    

    在App.vue 里添加链接 ,以及路由导航链接

    <template>
      <div id="app">
        <h1>{{msg}}</h1>
        <div >
          <!-- <router-link to="/home" tag='li'>主页</router-link>
    		   <router-link to="/news" tag='li'>新闻</router-link> 
               -->
          <ul @click="gotoPage($event)">
            <li tag='home'>主页</li>
            <li tag='news'>新闻</li>
          </ul>   
        </div>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to ruanmou'
        }
      },
      methods:{
        gotoPage(ev){
          var target = ev.target,
              tag = target.getAttribute('tag');
          switch(tag){
            case 'home':
              this.$router.push({
                path:'/home',
                query:{
                  name:'laney'
                }
              })
              break;
            case 'news':
            this.$router.push({
              path:'/news',
              query:{
                age:'10'
              }
            })
            break;
          }
        }
      }
    }
    </script>
    
    展开全文
  • vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html 1. 简介 版本:2.x vue-cli是一个vue脚手架,可以快速构造项目结构 vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码...

    vue-cli脚手架

    https://cli.vuejs.org/zh/guide/installation.html

    1. 简介

    版本:2.x
    vue-cli是一个vue脚手架,可以快速构造项目结构
    vue-cli本身集成了多种项目模板:
        simple  很少简单
        webpack 包含ESLint代码规范检查和unit单元测试等
        webpack-simple 没有代码规范检查和单元测试
        browserify 使用的也比较多
        browserify-simple
    

    2. 示例,步骤:

    2.1 安装@vue/cli (vue-cli),配置vue命令环境

    version ---- 2.9.6版本
    
    npm install vue-cli -g  或者 yarn global add vue-cli
    vue --version
    vue list
    
    version ---- @vue/cli 4.1.2 
    
    npm install -g @vue/cli   
    # OR
    yarn global add @vue/cli  ,或者指定版本安装 yarn global add @vue/cli@3
    
    可以安装一个桥接工具拉取 2.x 模板 (旧版本)
    
    npm install -g @vue/cli-init
     `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
     vue init webpack-simple webpack-simple-web
     vue init webpack vue-cli2-demo
    

    全局卸载 :yarn global remove @vue/cli

    2.2 初始化项目,生成项目模板

    vue-cli
    vue-cli 2语法:vue init 模板名  项目名  
    
    @vue/cli 3 -4
    语法:vue create 项目名
    

    2.3 进入生成的项目目录,安装模块包

    cd vue-cli2-demo
    npm install
    

    2.4 运行

    vue-cli版本创建的项目:
    npm run dev  //启动测试服务
    npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
    
    @vue/cli版本 创建的项目
    npm run serve   //启动开发服务
    npm run build   //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上
    
    ESLint是用来统一代码规范和风格的工具,如缩进、空格、符号等,要求比较严格
    

    官网

    2.5 使用图形化界面

    你也可以通过 vue ui 命令以图形化界面创建和管理项目:

    vue ui

    三、模块化开发

    2. axios模块化

    npm install axios -S
    

    vue-cli3-demo 项目里
    使用axios的两种方式:
    方式1:在每个组件中引入axios ,

        import axios from 'axios';
            getInfo(){
                axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                    console.log(res);
                })
             }
    

    方式2:在main.js中全局引入axios并添加到Vue原型中

        import axios from 'axios';
        Vue.prototype.$axios = axios;
            getInfo(){
                this.$axios.get('https://api.github.com/users/fly39244080').then((res)=>{
                    console.log(res);
                })
             }
    

    3. 为自定义组件添加事件

    二、 Element UI

    1. 简介

    Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率
        ElementUI  PC端
        MintUI 移动端
    

    官网

    2. 快速上手

    2.1 安装elment ui

    cnpm install element-ui -S
    

    2.2 在main.js中引入并使用组件

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css' //该样式文件需要单独引入
    Vue.use(ElementUI);
    这种方式引入了ElementUI中所有的组件
    

    2.3 在webpack.config.js中添加loader

    CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
    默认并没有style-loader模块,所以需要单独安装
    cnpm install style-loader --save-dev
    

    2.4 使用组件

    2.5 使用less

    安装loader,需要两个:less、less-loader
    cnpm install less less-loader -D
    在webpack.config.js中添加loader    
    

    3. 按需引入组

    3.1 安装babel-plugin-component

    cnpm install babel-plugin-component -D  
    

    3.2 配置.babelrc文件

    "plugins": [["component", [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
    ]]]
    

    3.3 只引入需要的插件

    展开全文
  • 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

    展开全文
  • 【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-cli 3.X 构建工具零基础快速上手

    千人学习 2019-10-12 11:02:01
    主要课程内容: 本课程的脚手架工具为vue-... vue-cli提供了一套本地的node测试服务器,使用vue-cli自己提供的命令,就可以启动服务器。 vue-cli中集成打包上线的方案,极大提升我们的vue项目的开发效率。
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选...
  • 移动开发【4】 Vue-cli vue脚手架搭建

    千次阅读 2020-04-17 12:15:32
    文章目录老版本vue-cli脚手架搭建vue-cli 4.x脚手架搭建 老版本vue-cli脚手架搭建 一开始用的是老版本,就记录了一下 如果源没换,先换个源 npm config set registry https://registry.npm.taobao.org 先...
  • vue-cli vue2.0如何使用引入less或者sass

    千次阅读 2017-10-16 15:18:41
    首选,安装 less 和 less-loader ,在项目目录下运行如下命令 npm install less less-loader --save-dev1 或者用 yarn安装 ...然后在vue里面引用就可以 style lang="less" rel="stylesheet/less"> @impor
  • Vue-Cli3 使用jquery

    万次阅读 2020-05-18 09:36:09
    vue-cli3.0 没有webpack.config.js 配置文件 :所以在一些博客教程中是说的在webpack.config.js 里面添加var webpack=require(‘webpack’);这样一句话。 我找了半天没看见这个文件夹,后来发现cli3之后就没有这个...
  • vue搭建——vue-cli

    2020-01-03 11:16:53
    vue搭建——vue-clivue-cli脚手架使用创建项目启动项目 在使用vue-cli之前先要安装node。 链接: 点击下载安装Node. vue-cli脚手架使用 // 全局安装vue-cli npm i -g @vue/vue-cli 或者 yarn add global @vue/cli ...
  • 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用。如果使用npm过程中安装速度过慢,可以考虑使用淘宝镜像的cnpm来代替npm。 首先Vue的安装依赖于Node.js,要保证你的计算机上...
  • 使用npm全局安装vue-cli: npm install -g @vue/cli 可以使用如下的创建项目的命令,查看vue cli的安装情况: 按照上面的提示,先卸载之前的版本,然后安装新的版本。 安装成功后,如果要查看安装的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。启用...
  • Vue02_第一个vue-cli项目

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

    万次阅读 2019-11-07 10:23:31
    安装vue-cli npm install -g @vue/cli-service-global 创建项目 vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以...
  • vue-cli3.x打包后静态资源的路径

    万次阅读 2019-06-24 10:50:50
    vue-cli3.0移除了配置文件目录: config和build文件夹,可以说是非常的精简 修改vue.config.js module.exports = {} 里面的publicPath属性即可
  • 使用 vue-cli + element-ui 快速搭建项目

    万次阅读 多人点赞 2018-01-31 16:32:36
    一、前言 vue2.0的到来,凭借这其简单易学、完善的API中文文档、丰富的生态系统,成为国内目前十分受欢迎的前端MVVM框架, element-ui是基于 vue2.0的 ui框架,由饿了么团队开发维护的,目前是vue的ui...使用vue-...
  • 我使用vue init webpack-simple ProjectName创建了一个简单的Vue-cli工程,但是无法实现热更新。每次一点点改动就需要重新编译运行才能看到效果,十分困扰。 我的webpack配置如下: ``` const path = require('...
  • Vue-cli3 项目配置 Vue.config.js

    万次阅读 多人点赞 2018-06-12 21:34:20
    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)语法module.exports = ...
  • Vue新手学习笔记:vue-cli框架

    千次阅读 多人点赞 2019-01-17 17:08:41
    搭建vue-cli项目 作为一个喜欢动手的人,在理论有一定了解的情况下,我选择通过实践来让我记住之前看过的理论,因为我看完就忘 1.安装node.js及npm npm官网地址 下载node,安装很简单一直下一步就可以了。 win+...
  • 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-cli 3.x & vue-cli 4.x修改dist路径

    万次阅读 热门讨论 2018-07-04 18:10:50
    一些牢骚 前端的世界真的太奇妙,更新速度真的跟火箭一样。没有一颗真正热爱它的心,真的很难继续走下去。前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno,受到了大量的关注。Ryan Dahl直言node是一个失败品...
  • 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项目搭建 -- visual Studio加vue-cli

    千次阅读 2017-08-12 09:45:07
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目, GitHub地址:https://github.com/vuejs/vue-cli 一:安装node.js 安装教程:http://www.runoob.com/nodejs/node...

空空如也

1 2 3 4 5 ... 20
收藏数 545,319
精华内容 218,127
关键字:

vue-cli

vue 订阅