vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先

   1、npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些

   2、cnpm i -g vue-cli   //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用。

   3、vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,projectName:项目名字,随意写,它会创建一个ProjectName的文件夹,作为根目录

   4、cd ProjectName //打开新创建的文件夹

   5、cnpm install   //在跟目录中安装依赖。

   6、npm run dev   // 运行项目,

  引入文件:

    所有文件引入,都可以放在index.html中按常规方式引入。

    引入 element-ui:

      npm i element-ui -D       安装element-ui模块
      cnpm i style-loader -D        配置style-loader 。这个在package.json中,新的文件没有配置,一定要安装loader。
      import ‘element-ui/lib/theme-default/index.css‘      引入css
      import ElementUi from ‘element-ui‘            引入ui模块
      Vue.use(ElementUi)                    使用引入ui模块。
      webpack.config.js                    到官网复制配置代码,放入webpack.config.js中。

    引入stylus:

      cnpm i stylus stylus-loader -D     安装stylus 模块和stylus-loader配置。
      webpack.config.js中添加 { test: /\.styl$/, loader: ‘style-loader!css-loader!stylus-loader‘ }

import 引入

  import aaa from ‘./xxx.vue‘  vue文件引入后得到一个组件以及xxx.vue中export default的内容。如果vue文件中:export default{data(){return{t1:‘1‘}}},则能够用aaa.data().t1获取到1。

  import aaa from ‘./xxx.js’  aaa得到js文件文件中export defualt的内容,还有一大堆原型方法。

时间: 2024-10-14 14:51:01

vue cli搭建项目及文件引入的相关文章

Vue Cli搭建域名服务器常见问题

Vue Cli搭建域名服务器常见问题 Vue Cli不使用反向代理配置域名 通过npm run serve命令执行Vue项目只能通过IP地址来访问,即使域名服务中设置DNS依然访问不到.有以下三种解决办法: 1.修改项目根目录下[email protected]\cli-service\lib\options.js文件 //第133行 devServer: { /* open: process.platform === 'darwin', host: '0.0.0.0',//改为域名 port:

使用vue cli开发项目中遇到的坑

一.部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题 实行前后端分离,使用vue i

vue+ts搭建项目

Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉及的技术框架: vue2.5 vuex3.0 vue-router3.0 axios typescript3.2 Tip: 由于vue-cli3.0帮我们简化了webpack的配置,我们只需要在根目录下的vue.config.js文件的chainWebpack进行配置即可. 接下来进入正题(前提是你

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告

报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

VUE神速搭建项目

1.npm install -g vue-cli 全局安装vue-cli脚手架 2.vue init webpack vueTest 初始化一个基于webpack的项目 3.cd vueTest 进入到这个项目 4.npm install 安装 5.npm run dev 运行访问.默认8080端口 配置自动打开页面: config下的index.js进行配置 原文地址:https://www.cnblogs.com/ll15888/p/11219909.html