精华内容
下载资源
问答
  • Vue怎么搭建项目

    首先,你的电脑需要安装node,然后安装vue脚手架:npm install vue-cli-g

    第二步:vue init webpack (也可以装简单模式:vue init webpack-simple) 一直下一步,

    第三步: npm install

    第四步:npm run dev

    (nom 可以换成淘宝镜像。这样速度快点::::: npm install -g cnpm --registry=https://registry.npm.taobao.org)

    然后以上的所有npm操作都替换为cnpm执行,特别是你的项目安装插件很大的时候还是很有帮助的。


    展开全文
  • webpack + vue项目搭建

    2017-08-29 15:06:22
    转自:[造轮子教程]十分钟搭建Webpack+Vue项目 原文使用的版本比较老,且看且珍惜。 之前说到的vue.js的安装–vue-cli脚手架采用的vue-cli脚手架进行安装的自动构建的项目,但是...这里介绍webpack+vue怎么搭建vue项目

    转自:[造轮子教程]十分钟搭建Webpack+Vue项目

    原文使用的版本比较老,且看且珍惜。

    之前说到的vue.js的安装–vue-cli脚手架采用的vue-cli脚手架进行安装的自动构建的项目,但是实际项目中可能会有特殊的要求,所以没有使用到脚手架

    推荐vue项目目录结构:

    |-- ./config  // 全局变量
    |-- ./dist    // 编译后的项目代码
    |-- ./src     // 项目源码
        |-- apis        // api封装
        |-- components  // Vue组件
        |-- lib         // js工具类
        |-- router      // 路由
        |-- store       // Vuex的store
            |-- modules     // Vuex模块
        |-- style       // css
        |-- views       // 页面组件
        |-- index.js    // 入口文件
    |-- ./webpack.config    // Webpack各种环境的配置文件
    |-- ./package.json

    首先安装Node.js,选择需要的版本自行安装,这里不多赘述。

    本文源码在这:webpack + vue项目搭建,只要有安装Node.js,下载后运行npm install,后运行npm run dev即可。

    初始化项目

    为了方便阅读,这里的项目目录结构使用的是上面的推荐目录。

    在项目的根目录处(此处为./)使用使用命令行执行npm init -y-y的作用是跳过信息填写)创建package.json

    入口文件

    1、在根目录下直接建立一个index.html,作为页面的入口文件。

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>myProject</title>
      </head>
      <body>
        <div id="app">{{ message }}</div> <!-- Vue模板入口 -->
        <script src="dist/index.js" charset="utf-8"></script>
      </body>
    </html>

    2、在src下建立一个index.js,作为Vue的入口文件

    // import...from的语法是ES6的,需要用到babel,后面再说
    // require的语法是Commonjs的,webpack已经实现了,可以直接使用
    const Vue = require('vue')
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })

    3、安装模块

    安装Vue:npm install --save vue

    安装Webpack:npm install --save-dev webpack

    4、使用webpack编译打包

    除非在全局安装webpack,使用本地安装的webpack你需要写一长串的命令.\node_modules\.bin\webpack src\index.js dist\index.js,所以建议在package.jsonscript加入运行脚本,添加之后package.json如下:

    {
      "name": "myProject",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack src/index.js dist/index.js"  // <---添加这句
      },
      "keywords": [],
      "author": "Headmaster_Tan",
      "license": "ISC",
      "dependencies": {
        "vue": "^2.4.2"
      },
      "devDependencies": {
        "webpack": "^3.5.5"
      }
    }

    然后你可以执行npm run dev命令进行打包,此时打开index.html,如无意外应该是会报错的。这是一个vue@1 -> vue@2的版本升级问题,报错内容如下:

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    解决办法是使用下面的webpack配置文件对'vue'进行定义,报错原因详情可以看这里:Vue 2.0 升(cai)级(keng)之旅

    编写webpack配置文件

    上一步中直接使用webpack运行脚本webpack [入口文件] [出口文件],显然对于后期添加webpack插件和不同环境的配置是不行的。

    1、在项目根目录下创建webpack.config文件夹专门用于存放webpack的配置文件(当然也是完全可以只建一个webpack.config.js文件的)

    2、为了让配置文件不同的编译环境能够复用(例如loaders的配置,不管在开发环境还是生产环境肯定都是一样的),在webpack.config中首先创建一个base.js

    const path = require('path')
    const root = path.resolve(__dirname, '..')  // 项目的根目录绝对路径
    
    module.exports = {
      entry: path.join(root, 'src/index.js'),    // 入口文件路径
      output: {
        path: path.join(root, 'dist'),    // 出口目录
        filename: 'index.js'   // 出口文件名
      }
    }

    上面这段配置就实现了webpack src/index.js dist/index.js的功能,还可以额外拓展一下,变成:

    const path = require('path')
    const root = path.resolve(__dirname, '..')    // 项目的根目录绝对路径
    
    module.exports = {
      entry: path.join(root, 'src/main.js'),    // 入口文件路径
      output: {
        path: path.join(root, 'dist'),    // 出口目录
        filename: 'main.js'   // 出口文件名
      },
      resolve: {
        alias: {    // 配置目录别名
          // 在任意目录下require('components/example') 相当于require('项目根目录/src/components/example')
          components: path.join(root, 'src/components'),
          views: path.join(root, 'src/views'),
          styles: path.join(root, 'src/styles'),
          store: path.join(root, 'src/store'),
          'vue': 'vue/dist/vue.js'    // 这里就是解决上面vue@1 -> vue@2版本升级的报错问题
        },
        // 这里注意在新版本的webpack中,extensions是不能包含''空串的
        extensions: ['.js', '.vue'],    // 引用js和vue文件可以省略后缀名
      },
      module: {   // 配置loader
        // 在这里 -loader 不能忽略,乖乖加上吧
        loaders: [
          {test: /\.vue$/, loader: 'vue-loader'},    // 所有.vue结尾的文件,使用vue-loader
          {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}   // .js文件使用babel-loader,切记排除node_modules目录
        ]
      }
    }

    babel-loader就是将ES6的语法解析为ES5,要用到babel则根目录下要新建.babelrc文件用于配置babel

    {
      "presets": ["es2015"]
    }

    使用了vue-loaderbabel-loader需要安装包:

    npm install --save-dev vue-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 css-loader vue-style-loader vue-hot-reload-api vue-html-loader

    3、在webpack.config文件夹中创建dev.js文件:

    const path = require('path')
    const webpack = require('webpack')
    const merge = require('webpack-merge')
    const baseConfig = require('./base')
    const root = path.resolve(__dirname, '..')
    
    module.exports = merge(baseConfig, {})

    上面代码仅仅是导出了跟base.js一模一样的配置,下面我们添加更多用于dev(开发环境)的配置。

    webpack-merge 用于合并两个配置文件,需要安装

    npm install --save-dev webpack-merge

    4、使用webpack-dev-server,开启一个小型服务器,不需要再手动打开index.html进行调试了,修改配置文件为:

    module.exports = merge(baseConfig, {
      devServer: {
        historyApiFallback: true, // 404的页面会自动跳转到/页面
        inline: true, // 文件改变自动刷新页面
        port: 8080, // 服务器端口
      },
      devtool: 'source-map' // 用于标记编译后的文件与编译前的文件对应位置,便于调试
    })

    5、添加热替换配置,每次改动文件不会再整个页面都刷新,并使用HtmlWebpackPlugin,实现js入口文件自动注入

    安装webpack-dev-server: npm install --save-dev webpack-dev-server

    // ...同上
    const HtmlWebpackPlugin = require('html-webpack-plugin')  // 实现js入口文件自动注入
    module.exports = merge(baseConfig, {
      entry: [
        'webpack/hot/dev-server', // 热替换处理入口文件
        path.join(root, 'src/index.js')
      ],
      devServer: { /* 同上 */ },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),   // 添加热替换插件
        new HtmlWebpackPlugin({
          template: path.join(root, 'index.html'),  // 模板文件
          inject: 'body' // js的script注入到body底部
        })
      ]
    })

    这里的HotModuleReplacementPlugin是webpack内置的插件,不需要安装

    但HtmlWebpackPlugin需要自行安装:

    npm install --save-dev html-webpack-plugin

    在文件头中引入

    const HtmlWebpackPlugin = require('html-webpack-plugin')

    修改index.html,去掉入口文件的javascript引入:

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>myProject</title>
      </head>
      <body>
        <div id="app">{{ message }}</div>
      </body>
    </html>

    6、最后修改package.json中的webpack运行脚本为:

    {
      "dev": "webpack-dev-server --config webpack.config/dev.js"
    }

    为了测试webpack配置是否都生效了,下面创建一个vue组件src/components/Hello.vue:

    <template>
      <div>{{ message }}</div>
    </template>
    
    <script>
      export default {
        data: () => ({ message: 'Hello Vue.js!' })
      }
    </script>

    既然用到了vue组件,那自然需要安装vue-template-compiler: npm install --save-dev vue-template-compiler

    修改index.js

    import Vue  from 'vue'
    import Hello from './components/Hello.vue'
    
    new Vue({
      el: '#app',
      template: '<div><hello></hello></div>',
      components: { Hello }
    })

    运行npm run dev,打开浏览器localhost:8080,查看结果:

    Hello Vue.js!

    如果这里出现了报错,而且长这个样子的:

    Error: Cannot find module 'webpack/bin/config-yargs'
        at Function.Module._resolveFilename (module.js:485:15)
        at Function.Module._load (module.js:437:25)
        at Module.require (module.js:513:17)
        ······balabala

    那是因为webpackwebpack-dev-server的版本不兼容导致的,查看下版本重新下载就好了。

    配置路由

    1、安装vue-router: npm install --save vue-router

    2、在src目录下创建views(用于存放页面组件)和router(用于存放所有路由相关的配置)文件夹。

    3、添加页面组件src/views/Home.vue

    <template>
      <div><hello></hello></div>
    </template>
    
    <script>
      import Hello from 'components/Hello'
      export default {
        components: { Hello }
      }
    </script>

    下面的几个文件因为是使用的新版环境,所以和原文的会有很大出入。

    添加项目路由配置文件src/router/routes.js

    import Home from 'views/Home'
    
    export default [{
      path: '/',        // 代表访问 '/' 的时候其实是访问Home.vue页面
      name: 'home',
      component: Home
    }]
    

    添加路由入口文件src/router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import routes from './routes'
    
    Vue.use(Router)
    
    const router = new Router({
      hashbang: false, // 关闭hash模式
      history: true, // 开启html5 history模式
      linkActiveClass: 'active', // v-link激活时添加的class,默认是`v-link-active`
      routes
    })
    
    // 全局导航钩子
    router.beforeEach((to, from, next) => {
      console.log('---------> ' + to.path)  // 每次调整路由时打印,便于调试
      next()
    })
    
    export default router

    修改src/index.js

    import Vue  from 'vue'
    import router from './router'
    
    const App = new Vue({
      router
    }).$mount('#app')

    最后别忘了index.html

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>myProject</title>
    </head>
    <body>
      <div id="app">
        <router-view></router-view>    <!--路由替换位置-->
      </div>
    </body>
    </html>

    重新执行npm run dev,打开浏览器localhost:8080(访问Home.vue页面)查看效果

    Hello Vue.js

    配置Vuex

    vuex通常用于存放和管理不同组件中的共用状态,例如不同路由页面之间的公共数据

    vuex中的几个概念:

    • state: 状态,即数据
    • store: 数据的集合,一个vuex引用,仅有一个store,包含n个state
    • getters:state不能直接取值,使用getters返回需要的state
    • mutations: state不能直接赋值,通过mutation定义最基本的操作
    • actions: 在action中调用一个或多个mutation
    • modules: store和state之间的一层,便于大型项目管理,store包含多个module,module包含state、mutation、action

    本教程将以一个全局计数器作为例子

    1、安装vuex: npm install --save vuex

    2、添加src/store文件夹,存放vuex相关文件,添加src/store/modules用于vuex分模块管理。

    添加src/store/types.js,vuex的所有mutation type都放在一起,不建议分开多个文件,有效避免重名情况:

    export const INCREASE = 'INCREASE' // 累加
    export const RESET = 'RESET' // 清零

    3、编写vuex模块,添加counter.js模块目录store/modules/counter.js

    import * as types from 'store/types'
    // state
    const state = {
      count: 0
    }
    // getters
    const getters = {
      getCount: state => state.count
    }
    // actions
    const actions = {
      increase({ commit }) {
        commit(types.INCREASE)  // 调用type为INCREASE的mutation
      },
      reset({ commit }) {
        commit(types.RESET)     // 调用type为RESET的mutation
      }
    }
    // mutations
    const mutations = {
      [types.INCREASE](state) {
        state.count++
      },
      [types.RESET](state) {
        state.count = 0
      }
    }
    
    export default {
      state,
      getters,
      actions,
      mutations
    }

    4、添加store/index.js,作为vuex入口文件(共用的getters和actions可拆分到store/getters.jsstore/actions.js,然后在store/index.js进行导入,这里因为没有,所以就直接写了):

    import Vue from 'vue'
    import Vuex from 'vuex'
    import counter from './modules/counter'
    
    Vue.use(Vuex) // 确保在new Vuex.Store()之前
    
    export default new Vuex.Store({
      getters: {},
      actions: {},
      modules: {
        counter
      }
    })

    5、修改src/index.js,将store引入并添加到App中:

    import Vue from 'vue'
    import router from './router'
    import store from 'store'
    
    const app = new Vue({
      router,
      store
    }).$mount('#app')

    6、最后改造一下components/Hello.vue,可以看到vuex v2变化了蛮多:

    <template>
    <div>
      <p>{{ message }}</p>
      <p>click count: {{ getCount }}</p>
      <button @click="increase">increase</button>
      <button @click="reset">reset</button>
    </div>
    </template>
    
    <script>
    // vuex 提供了独立的构建工具函数 Vuex.mapGetters, Vuex.mapActions
    import { mapGetters, mapActions } from 'vuex'
    
    export default {
      data: () => {
        return {
          message: 'Hello Vue.js!'
        }
      },
      computed: mapGetters({
        getCount: 'getCount'
      }),
      methods: mapActions([
        'increase',
        'reset'
      ])
    }
    </script>

    重新执行npm run dev,打开浏览器localhost:8080,查看效果。

    配置eslint

    这不是必须的,不想要可以跳过。

    虽然eslint不是必须的,但是强烈建议用在所有的JavaScript项目中。

    对于个人开发,可以在编程过程中发现并提示语法错误,有效过滤各种低级错误

    对于团队开发,强制采用一致的编码风格,保证项目的一致性,有效避免各种任性行为

    但是一定要注意,eslint定义的只是编码风格,规则是死的,人是活的,学会利用自定义规则的功能,增减规则

    同时要知道,eslint检测不通过不一定就是不能运行的,可能只是这种写法违背了编码风格,学会查看控制的查找具体错误原因

    想要更好的eslint体验,请根据不同编辑器安装对应的eslint插件,主流的编辑器已有相应的插件

    1、选择合适的编码风格

    eslint提供了很多rules,可以直接在.eslintrc文件的rules中一个一个地配置

    显然我们大多数情况下不需要这么做,晚上已经有一些比较多人使用的风格了,本文推荐使用standard,点开这个链接,可以看到支持的编辑器和对应的插件名,自行去安装

    2、配置.eslintrc文件,在根目录下创建.eslintrc文件:

    {
      "parser": "babel-eslint", // 支持babel
      "extends": "standard", // 使用eslint-config-standard的配置
      "plugins": [
        "html" // 支持.vue文件的检测
      ],
      "env": {
        "browser": true, // 不会将window上的全局变量判断为未定义的变量
        "es6": true // 支持es6的语法
      },
      "rules": { // 自定义个别规则写在这,0忽略,1警告,2报错
        "no-unused-vars": 1 // 将”未使用的变量“调整为警告级别,原为错误级别,更多规则请看官网
      }
    }

    结合不同编辑器的插件,打开js和vue文件中,就可以看到提示了

    根据使用的不同风格,安装所需的包,本文安装:

    npm install --save-dev eslint babel-eslint eslint-config-standard eslint-plugin-standard eslint-plugin-html eslint-plugin-promise

    webpack生产环境配置

    前面已经配置过了开发环境下使用的配置文件dev.js,对于生产环境,通常需要对编译出来的文件户必须不过压缩处理,提取公共模块等,就需要专门提供一个配置文件。

    1、添加webpack.config/pro.js文件,把生产环境用不到的删除,比如webpack-dev-server, webpack-hot-replacement

    const path = require('path')
    const webpack = require('webpack')
    const merge = require('webpack-merge')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const baseConfig = require('./base')
    const root = path.resolve(__dirname, '..')
    
    module.exports = merge(baseConfig, {
      plugins: [
        new HtmlWebpackPlugin({
          template: path.join(root, 'index.html'), // 模板文件
          inject: 'body' // js的script注入到body底部
        })
      ]
    })

    webpack常用插件

    • extract-text-webpack-plugin 提取css到单独的文件
    • compression-webpack-plugin 压缩gzip
    • webpack.optimize.UglifyJsPlugin 压缩js文件,内置插件
    • webpack.DefinePlugin 定义全局变量,内置插件
    • webpack.optimize.CommonsChunkPlugin 提取公共依赖,内置插件

    根据项目需求添加相应的插件,插件配置参数请查看官方文档,这里不进行罗列

    2、在package.json中添加脚本:"build": "webpack --config webpack.config/pro.js"

    3、运行npm run build,可以在dist文件夹中看到打包好的文件。

    展开全文
  • VUEJS是目前主流的三大前端MVVM框架,使用VUE能大大增强我们前端开发对数据的处理能力,对页面交互,前后端交互等功能都大大增强了,所以VUEJS现在也广泛运用于前端开发中,那么今天我们主要讲讲怎么搭建一个VUE项目...

    VUEJS是目前主流的三大前端MVVM框架,使用VUE能大大增强我们前端开发对数据的处理能力,对页面交互,前后端交互等功能都大大增强了,所以VUEJS现在也广泛运用于前端开发中,那么今天我们主要讲讲怎么搭建一个VUE项目及其搭建项目过程中的要点。本文以VUE脚手架vue-cli的搭建方式为实例给大家进行讲解。

      • 下载并安装nodejs。vue-cli是基于nodejs的脚手架,那么我们在搭建vue项目之前就需要先安装好我们的nodejs环境,在nodejs环境下我们能方便的安装项目所需依赖,运行项目,以及构建纯静态html项目。

      • 下载nodejs的windows下的msi安装文件

        https://nodejs.org/zh-cn/

        1c0649dedff28933621dbcd6cdaf9a35.png

      • 执行msi安装,注意安装路径中最好不要包含中文

      • 安装完成后分别在cmd中执行node -v和npm -v查看是否安装成功

        131741514ee3cf3d9095248f965bf133.png

      • 安装国内镜像源的cnpm,由于众所周知的原因,在国内使用cnpm下载速度会特别慢,通常我们还是会安装cnpm用于nodejs环境下安装相关依赖。执行以下命令安装:

        npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

        需要注意的是如果我们用npm但是又想使用国内例如taobao的镜像源那么我们可以通过--registry参数设置镜像源,但每次都要加上参数不是很方便,使用nrm可以管理npm的镜像源,使用cnpm默认也是国内镜像源。

      • 可选择安装nrm用于管理镜像源,执行如下命令:

        cnpm install -g nrm

        nrm常用命令如下:

        nrm ls    该命令会列出可用镜像源,*代表当前使用的镜像源

        e2ba0e056fb894705aa3ff82b14a3f2d.png

        nrm use taobao    该命令会切换到相应镜像源

        nrm test npm    该命令能测试镜像源速度

        bbb6658425ad98cbbc8125abb6ecd6c1.png

      • 处理好npm镜像源的问题后,可以使用cnpm进行vue-cli的安装,执行:

        cnpm install vue-cli -g

        安装完成后查看vue脚手架版本确定是否安装成功:

        vue -V

           e0d17175d0b0a8438e2a5234b456192d.png

    • 在本地创建一个工作目录文件夹

      142b4c27b05cac40d104dec3a8e6d355.png

    • 进入到该目录执行:

      vue init webpack [项目名称]

      bb1342a53969e5f6930c2cef58a11c07.png

      需要注意的是,init时,其他选项都可以默认,而ESLint最好选择no这个是用于代码检测的,由于要求过于严格,安装后会出现很多时候运行项目报警告。

    • init完成后目录结构如下:

      8a607c0ebfbd7fd0075a95b1aca0e9fe.png

    • cd到此目录执行npm run dev即可运行项目,注意运行后不要按ctrl+c退出也不要关闭cmd窗口

      4cfa96bbb5b633fc480c272372d54804.png

    • 访问图中地址即可访问一个最简单的vue项目地址

      b3cad77cef3892ee3b73e077df23f89f.png

    • 如果你是从git或者其他地方获取到别人的vue项目的话,你获取到的代码通常是没有node_modules但包含package.json的结构。

      d393263baa1cc215ac8078daa8f98c2d.png

    • 此时需要先执行npm install先安装依赖,执行后就会出现node_modules目录

    • 然后就能正常执行npm run dev

    • 我们在合作开发的过程中,可能有成员引入了新的依赖,所以在拉取别人代码后通常需要执行npm install安装依赖

        至此,关于如何搭建vue项目进行开发就先讲解到这里!后续我会继续更新关于vue前端开发的内容,也欢迎各位同学关注或留言给我提出问题,我们一起探讨!

    展开全文
  • Vue 脚手架(vue-cli) 的环境搭建 关于Vue 脚手架(vue-cli) vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面。 vue 脚手架...

    Vue 脚手架(vue-cli) 的环境搭建

    关于Vue 脚手架(vue-cli)

    vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面。

    vue 脚手架用于自动生成 vue.js+webpack 的项目模板,分为 vue init webpack-simple 项目名 和 vue init webpack 项目名两种。其本质就是给出一套文件结构,包含基础的依赖库,用户只需要 npm install 就可以,不需要为编译或其他琐碎的事情而浪费时间

    环境安装:

    一、使用npm命令安装模块:

    npm install < Module Name >

    例如:我们使用 npm 命令安装常用的 Node.js web 框架模块 express:
    npm install express
    安装好之后,express 包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require(‘express’) 的方式就好,无需指定第三方包路径。

    二、全局安装与本地安装

    npm 的包安装分为本地安装(local)、全局安装(global)两种:
    npm install express # 本地安装
    npm install express -g # 全局安装

    如果出现以下错误:
    npm err! Error: connect ECONNREFUSED 127.0.0.1:8087

    解决办法为:
    npm config set proxy null

    1、本地安装

    a. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
    b. 可以通过 require() 来引入本地安装的包。

    2、全局安装

    a. 将安装包放在 /usr/local 下或者你 node 的安装目录。
    b. 可以直接在命令行里使用。

    (1)安装 vue:
    A、npm install vue
    B、由于国外访问速度较慢,建议将 npm 源设置为国内的镜像,可以大幅提升安装速度(例如设置淘宝镜像):
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    (设置淘宝镜像后,可以使用cnpm命令)

    (2)安装 Webpack:
    要使用 Webpack 前需要先安装 Node.js,webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
    cnpm install webpack -g

    (3)安装 Vue 脚手架:
    cnpm i -g @vue/cli-init

    (4)在计算机创建一个工程目录,并进入该目录
    cd 目录

    (5)根据模版创建项目 vue init webpack 项目名
    vue init webpack

    (6)安装项目依赖:
    首先使用cd命令进入项目:
    A、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
    cnpm install vue-router vue-resource --save
    B、安装 elementui
    npm install element-ui --save
    C、安装 axios
    cnpm install axios

    (7)启动项目
    cnpm run dev
    在这里插入图片描述

    (8)访问项目:在浏览器地址栏输入 localhost://8080,出现:
    在这里插入图片描述
    那么这个就算是成功了

    展开全文
  • 很久没更学习了 就不知道分享什么技术了 简单一个教程(这个也是写了好久了) 有错误欢迎指正 vue搭建脚手架项目教程1. 全局安装vue-cli3 npm install -g vue-cli vue -V // 查看版本2.创建一个名字为vue-demo的项目...
  • vue脚手架搭建流程

    万次阅读 多人点赞 2018-01-07 15:49:22
    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧。(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的。。。。。。) 1&安装node....
  • vue环境搭建

    2019-07-05 11:46:57
    vue环境搭建 1、下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可。 具体怎么安装Node.js就不用具体说明了,安装Node.js会默认安装npm(包管理工具)。 2、启用cmd 按...
  • 先说说前言,因为最近在看技术,vue还是很火的,至少现在做vue的公司很多,相比于angular我觉得vue更适合上手,所以我今天就讲讲怎么搭建vue的项目文件,当然这个也是我自己搭过一遍的,也走了一下接口,获取到了...
  • 在使用vue做项目的首要步骤,就是怎么使用webpack搭建项目。 对于很多前端开发者而言,webpack繁琐的配置步骤,很难适合每一位开发者。 因此,vue官方就出了一款 vue-cli脚手架,只需一条命令就可以快速搭建一个...
  • (图片的上一级目录是VUE-ERP,你的项目名不一样) 3、下载依赖。 输入命令: cnpm install(cnpm下载有时莫名其妙的出bug) npm install (很慢,小型项目还行) yarn (要先下载yarn才能用,建议,很好用) 3.1 为...
  • Mac下安装vue搭建vue项目

    千次阅读 2020-03-19 10:47:52
    题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记。 1.访问node.js官网:https://nodejs.org/en/下载对应安装包。 点击添加图片描述(最多60个字)编辑 2.安装完成,在终端输入 : node -v ...
  • 怎么玩的,直接参考 vuepress文档吧, 可以木事总结一些知识点,或者转载,每日反复翻看几遍,如沐浴春风般温暖,不扯其它了,简单写写自己搭建的模板怎么部署到 github的静态页面, 由于git访问比较慢,所以最后 会搬到 码云...
  • 018.vue环境搭建

    2019-12-19 14:16:39
    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue...
  • 摸了一天的Vue-cli脚手架,终于有点明白怎么用脚手架搭建vue项目,并运用到现有的项目中。为想上手Vue的小白们少走弯路,在这总结一下。 在搭建Vue项目之前,先确保基础环境的准备,需要有nodejs和npm,没有的话先...
  • 推荐在这里阅读效果更佳 背景 网上搜了很多教程,包括官网的教程,但是...你的 vuepress 项目是否已经在github上的仓库下 如果是,请跳到第二步 如果不是,想在GitHub新建一个仓库,如图所示: ## 小坑 仓库名字要和...
  • 新版vue-cli 3.0 在根目录下创建 vue.config.js 文件 复制下面代码 module.exports = { devServer: { port: 8080, // 端口 }, lintOnSave: false // 取消 eslint 验证 }; port更改成自定义的端口 =========...
  • 怎么搭建vue-cli脚手架

    2019-09-26 14:33:54
    我们在使用vue搭建项目的时候,经常要使用到vue-cli。 一、安装node.js 去node官网下载并安装node,一直next就行。 等待安装完毕,输入node-v,如果输出版本号,那说明已经成功安装了。再输入命令行npm-v,输出...
  • 我想了想,Vue 都发布了这么久的时间了,连基本的vue-cli 都不会灵活运用,那怎么VUE 项目呢?后面我换位思考了一下,有必要整理一篇关于vue-cli 快速搭建项目(要考虑到新手入门),废话少说,进入正题。vue-cli 是...
  • 给以后的移动端项目留个模板首先新起一个项目vue init webpact projectName解决适配问题引入lib-flexible和 px2rem-loader,打开build文件夹,编辑utils.jsexports.cssLoaders = function (options) {options = ...
  • vue框架搭建--移动端

    2019-10-03 19:22:05
    由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架。在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的使用方法,...
  • vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全家桶其他框架的使用...
  • Vue环境搭建+VSCode+Win10

    2019-09-23 14:11:05
    公司里面是内网,开发环境搭建都是专人搭建好的,导致首次接触vue的我在开发完一个项目后居然不知道怎么搭建开发框架,有点可笑,于是乎有了这篇文章: 1、安装node.js(js运行环境 ) a、Node.js 安装包及源码下载...
  • vue cli修改端口号 vue修改端口号以下文字资料是由(历史新知网...vue cli+webpack怎么修改默认端口号在webpack.config.js文件里面配置开发服务器devServer: {historyApiFallback: true,noInfo: true,port:9188,//访...
  • vue项目详细搭建步骤

    2019-04-02 10:33:51
    详细描述怎么搭建vue项目,nodejs安装,idea支持,以及vue打包部署
  • vue项目环境搭建及一个简单的vue例子

    万次阅读 多人点赞 2018-03-22 18:11:36
    在刷过文档之后,我就想着,真实的项目是怎么样子的呢,然后就开始了vue-cli脚手架的搭建和使用,下面是我搭建环境的步骤以及我自己初步使用vue-router实现的一个简单的不能再简单的例子。注意,文中的例子适合对vue...
  • vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全家桶其他框架的使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 696
精华内容 278
关键字:

vue怎么搭建

vue 订阅