vue项目配置和遇到的坑

下面是我在学习vue时，进行的vue项目的配置和进行监督项目练习时遇到的坑，如有不妥之处或者有何建议，请多多指教。
1/下载node.js并安装（可执行程序）
命令窗口
2/node -v 查看版本
npm -v
3/安装cnpm,taobao镜像不要写错哦
npm install -g cnpm --registry=https://registry.npm.taobao.org
4/cnpm -v
5/npm install webpack -g (查看版本号 webpack -v)
npm install -g vue-cli
6/npm init
7/npm install vue --save
创建项目，转到需要的项目文件夹下面执行命令
8/vue init webpack 项目文件夹（项目工程的配置）
9/转到项目文件夹下，执行命令
npm install
10/运行项目
npm run dev

注意：

js里面全部都是单引号，不要用双引号

打包时改config.js中assetsPublicPath的值由‘/’改为‘./’否则在tomcat中首页是空白页
然后在项目文件夹/build下执行命令 cnpm run build

注意切记：引入外部css
1/在D:\WorkSpace\jasonwang\build\webpack.base.conf.js里面添加，一定要有include

{
        test: /\.css$/,
        loader:'style-loader!css-loader',
        include: [/src/]
      }

2/ @import ‘…/assets/css/base.css’;
@import ‘…/assets/css/main.css’;
3/引入bootstrap的问题，就是把刚才添加的
test: /.css$/,
loader:‘style-loader!css-loader’,
include: [/src/]
注释掉，不知道为什么，就是通了
4/引入jquery.不要用导入

cnpm install jquery --save-dev
webpack.base.conf.js
plugins: [
new webpack.optimize.CommonsChunkPlugin(‘common.js’),
new webpack.ProvidePlugin({
jQuery: “jquery”,
$: “jquery”
})
]
最后在main.js中加入import $ from ‘jquery’,完成jquery的引入

5/若是提示找不到新添加的.vue组件，就@/components/bidPriceSelectUser，记得，@/,不要忘了斜杠哦

项目打包：在项目目录下 npm run build

6/java跨域问题使用注解 @CrossOrigin 在@Controller上面

7/main.js 中引入js,css,全局变量,axios

import global from './Global.vue'
import $ from 'jquery'
import VueAxios from 'vue-axios'
import axios from 'axios'
import 'bootstrap/js/bootstrap.js'
import 'bootstrap/css/bootstrap.min.css'
import './assets/css/base.css'
import './assets/css/main.css'


Vue.prototype.GLOBAL = global
axios.defaults.baseURL = global.BASE_URL
axios.defaults.withCredentials = true


Vue.prototype.$ajax = axios
Vue.use(router)
Vue.use(VueAxios)
Vue.use(axios)
Vue.use($)


Global.vue
<script>
  const BASE_URL = 'http://192.168.20.99:8082'
  const GID = 1
  export default{
    BASE_URL,
    GID
  }
</script>

8/ router参数的获取和页面的跳转

this.uId = this.$route.params.uId
this.$router.push({path: '/okWait'})//转到指定的页面

9//* 配置参数，如果直接用json格式后台获取不到数据 */

var params = new URLSearchParams()
        params.append('userId', this.uId)
        params.append('gId', this.GLOBAL.GID)
        params.append('price', this.price)
       this.$ajax.post(this.GLOBAL.BASE_URL + '/register.do', params)
          .then(response => {
            /* 注册成功跳转到登陆页 */
            if (response.data.status) {
              /* 跳转页面 */
              this.$router.push({path: '/login/' + this.GLOBAL.GID})
            }
          })
          .catch(error => {
            console.log(error)
          })

10/ 路由

<router-link :to="'/payBidPrice/' + gId + '/' + uId + '/' + price" class="btn btn-danger">拍下来</router-link>

wjs040

发布了31 篇原创文章 · 获赞 1 · 访问量 5691

私信关注

vue项目配置和遇到的坑

猜你喜欢