vue学习总结

来源:互联网 发布:倩女幽魂有mac版吗 编辑:程序博客网 时间:2024/05/20 07:52

1.想学习vue,先搭建环境

①我们使用npm方式安装vue的时候,需要用到node的npm管理工具(node安装完成之后可以在目录下看到npm文件),所以先安装node,

②安装完成后,在cmd中输入node -v  和npm -v来检验node是否安装成功

③cmd中运行    npm install -g cnpm --registry=https://registry.npm.taobao.org    (注意空格和横杠)

④安装官方提供的vue命令行界面     cnpm install -g vue-cli

⑤新建一个项目vue init webpack vue-demo

安装项目依赖的包(进入到一个文件中的cmd指令是cd vue-demo
cd到vue-demo 文件夹,执行cnmp install,安装依赖包,安装完成之后,项目目录下多了node_modules:

运行项目
在命令行里输入 cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。(相应的退出方法是 输入快捷键 ctrl+c)

默认vue项目的端口号是8080,如果想修改的话,可以到项目的config目录的index.js文件,可以更改里边的port。

执行npm run dev实际是在调用根目录下的package.json


⑧想修改vue的欢迎界面,可以改变src/app.vue文件

⑨Missing space before value for key 'path'vue.js解决空格报错
   找到webpack.base.config.js文件注释掉下面的东西!!  
   module: {
    rules: [
      /*...(config.dev.useEslint? [{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter'),
          emitWarning: !config.dev.showEslintErrorsInOverlay
        }
      }] : []),*/
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },

原创粉丝点击