Vue开发入门记录

目录

1.安装Node.js

2.安装cnpm

3.安装vue脚手架

4.创建项目

5.修改配置文件

5.1使用相对路径

5.2允许网络上其他终端访问

6.安装Vue Devtools调试工具

7.结束

---

 

1.安装Node.js

到Node.js官网下载并安装Node.js

2.安装cnpm

由于许多npm包都是在国外，安装起来特别慢，所以我们这里利用淘宝的镜像服务器，来对我们依赖的module进行安装。

安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org 之后回车等待命令

还可以将npm源切换为淘宝镜像，这样平时就可以直接使用npm命令了，

在终端中输入命令 npm config list 来查看 npm 源地址，默认地址为：

 metrics-registry = "https://registry.npmjs.org/"

国内常用的npm源地址为淘宝镜像：

https://registry.npm.taobao.org/  

切换方式：在终端输入以下命令，即可设置npm源地址为淘宝镜像。  

npm set registry https://registry.npm.taobao.org/

这时使用 npm config list 查看 npm 源地址就变为

metrics-registry = "https://registry.npm.taobao.org/"

3.安装vue脚手架

命令为：cnpm install -g vue-cli，回车，等待安装

安装完后，可以输入vue，然后回车，如果出现vue的信息，则说明安装成功了。

4.创建项目

找一个合适的位置，使用命令行定位到指定路径下，使用命令vue init webpack vuedemo创建项目，此处的vuedemo为项目名称（如果使用vue create vuedemo创建时，不会生成webpack的配置文件及目录），在随后的问答中可以选择默认，最后等待项目初始化完成

? Project name vuedemo2
? Project description A Vue.js project
? Author ssj
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

5.修改配置文件

5.1使用相对路径

修改webpack打包配置，使打生产包时路径引用使用相对路径，否则默认打包的文件中使用的是绝对路径，不方便部署

修改build/webpack.prod.conf.js文件，在output项目下新增：publicPath: './'，可以将js,css文件的引用起始路径改为相对路径

output: {
    publicPath: './',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

修改build/util.js文件，在ExtractTextPlugin.extract中增加属性publicPath: '../../'，可以将css中引用的字体文件路径改为相对路径

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    }

5.2允许网络上其他终端访问

项目在开发过程中，可以在本机使用http://localhost:8080来访问，如果此时其他电脑通过网络访问该测试环境时，会提示Invalid Host header的错误，此时可以修改配置文件实现允许通过网络访问，找到build/webpack.dev.conf.js，找到devServer段，增加属性：disableHostCheck: true,之后重新运行npm run dev即可

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    disableHostCheck: true,
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  }

6.安装Vue Devtools调试工具

下载扩展程序安装包，打开谷歌浏览器的扩展程序界面，将压缩包内的crx文件拖放到扩展程序的界面中即可完成安装，安装后在F12调试界面中可以找到Vue标签，如果未找到，可以关闭浏览器再打开试一下，如果还不行，可以重启计算机尝试。

vue-devtools5.3.4.rar-Javascript文档类资源-CSDN下载将解压后的crx文件拖放到谷歌浏览器的扩展程序界面中，即可自动安装，本版本适用于Vue2.x更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/shuaijie506/76456345

7.结束

至此，一个空白的模板工程已建立，在这个模板目录上创建自已需要的子目录和文件，搭建自已的前端框架