精华内容
下载资源
问答
我要提问

  • 怎么搭建一个Vue项目？

     2017-10-22 11:31:22
    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.json的script加入运行脚本，添加之后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-loader和babel-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
    


    那是因为webpack和webpack-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.js和store/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文件夹中看到打包好的文件。
    


    完
    收起
    展开全文
    webpack

  • 别人发给你的vue 怎么运行_【前端开发】【总结】VUE项目搭建

     2021-01-16 00:29:24
    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脚手架搭建项目环境？

     2021-03-08 18:02:49
    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文件怎么使用_vue搭建脚手架项目简单搭建

     2020-11-25 05:12:19
    很久没更学习了 就不知道分享什么技术了 简单一个教程（这个也是写了好久了） 有错误欢迎指正 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的脚手架vue-cli）
    
                                    
                                2018-04-04 09:44:29
                            
    
                            
    
                                
    
                                    先说说前言，因为最近在看技术，vue还是很火的，至少现在做vue的公司很多，相比于angular我觉得vue更适合上手，所以我今天就讲讲怎么搭建vue的项目文件，当然这个也是我自己搭过一遍的，也走了一下接口，获取到了...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    如何使用vue脚手架搭建一个vue项目？
    
                                    
                                2019-09-16 12:00:00
                            
    
                            
    
                                
    
                                    			在使用vue做项目的首要步骤，就是怎么使用webpack搭建项目。 对于很多前端开发者而言，webpack繁琐的配置步骤，很难适合每一位开发者。 因此，vue官方就出了一款 vue-cli脚手架，只需一条命令就可以快速搭建一个...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    怎么打开运行一个vue脚手架搭建的项目
    
                                    
                                2021-05-10 10:18:19
                            
    
                            
    
                                
    
                                    （图片的上一级目录是VUE-ERP,你的项目名不一样）  3、下载依赖。 输入命令： cnpm install（cnpm下载有时莫名其妙的出bug） npm install （很慢，小型项目还行） yarn （要先下载yarn才能用，建议，很好用） 3.1 为...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        node.js   
                                        前端   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Mac下安装vue及搭建vue项目
    
                                    
                                    
                                            千次阅读
                                    
                                2020-03-19 10:47:52
                            
    
                            
    
                                
    
                                    题记：学vue有一段时间了，终于今天下定决心每日书写一篇学习笔记。  1.访问node.js官网：https://nodejs.org/en/下载对应安装包。    点击添加图片描述（最多60个字）编辑  2.安装完成，在终端输入 ：  node -v  ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vuepress 搭建 文档 博客
    
                                    
                                2019-11-21 19:27:05
                            
    
                            
    
                                
    
                                    怎么玩的,直接参考 vuepress文档吧, 可以木事总结一些知识点,或者转载,每日反复翻看几遍,如沐浴春风般温暖,不扯其它了,简单写写自己搭建的模板怎么部署到 github的静态页面, 由于git访问比较慢,所以最后 会搬到 码云...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    018.vue环境搭建
    
                                    
                                2019-12-19 14:16:39
                            
    
                            
    
                                
    
                                    想写一些关于vue的文章已经很久了，因为这个框架已经火了很久，在公司里用的框架都比较老旧，但怎么也得跟上前端发展变化的潮流，这不，开始使用vue开发项目了，一遍开发一边踩坑中，今天要记录的是五分钟搭建vue...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Vue环境搭建及简单例子
    
                                    
                                2020-02-09 21:36:34
                            
    
                            
    
                                
    
                                    摸了一天的Vue-cli脚手架，终于有点明白怎么用脚手架搭建vue项目，并运用到现有的项目中。为想上手Vue的小白们少走弯路，在这总结一下。   在搭建Vue项目之前，先确保基础环境的准备，需要有nodejs和npm，没有的话先...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        npm   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    怎么把使用vuepress搭建的博客部署到Github Pages
    
                                    
                                2019-09-25 05:14:45
                            
    
                            
    
                                
    
                                    推荐在这里阅读效果更佳 背景 网上搜了很多教程，包括官网的教程,但是...你的 vuepress 项目是否已经在github上的仓库下 如果是，请跳到第二步 如果不是，想在GitHub新建一个仓库，如图所示：  ## 小坑 仓库名字要和...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    用vue-cli搭建的vue项目怎么更改端口
    
                                    
                                2020-06-02 10:47:31
                            
    
                            
    
                                
    
                                    新版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脚手架）快速搭建项目
    
                                    
                                2020-11-25 04:37:45
                            
    
                            
    
                                
    
                                    我想了想，Vue 都发布了这么久的时间了，连基本的vue-cli 都不会灵活运用，那怎么玩VUE 项目呢？后面我换位思考了一下，有必要整理一篇关于vue-cli 快速搭建项目(要考虑到新手入门)，废话少说，进入正题。vue-cli 是...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue移动端怎么设置页面高度_Vue移动端项目搭建
    
                                    
                                2020-12-19 09:30:03
                            
    
                            
    
                                
    
                                    给以后的移动端项目留个模板首先新起一个项目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项目搭建以及全家桶的使用详细教程(小结)
    
                                    
                                2021-01-19 19:37:45
                            
    
                            
    
                                
    
                                    vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及vue全家桶其他框架的使用...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Vue环境搭建+VSCode+Win10
    
                                    
                                2019-09-23 14:11:05
                            
    
                            
    
                                
    
                                    公司里面是内网，开发环境搭建都是专人搭建好的，导致首次接触vue的我在开发完一个项目后居然不知道怎么搭建开发框架，有点可笑，于是乎有了这篇文章：  1、安装node.js(js运行环境 )  a、Node.js 安装包及源码下载...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue脚手架搭建配置试调地址和端口号_vue cli修改端口号 vue修改端口号
    
                                    
                                2020-12-23 21:52:28
                            
    
                            
    
                                
    
                                    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项目搭建以及全家桶的使用详细教程
    
                                    
                                2019-06-14 15:16:25
                            
    
                            
    
                                
    
                                    vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及vue全家桶其他框架的使用...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    696
            

            

                精华内容
                    278
            

        

        

            
热门标签

            
        


        


        

            关键字：
vue怎么搭建 

        



                

                    
                    vue
                    订阅